El minicart de WooCommerce es un widget oculto que aparece después de seleccionar un producto para nuestro carrito, es un bloque donde podremos ver los productos de nuestro carrito y normalmente está oculto, este aparece al hacer click sobre el icono del carrito, el código css que utilizaremos para maquetarlo será el siguiente.

/** minicart ajax header**/

.widget_shopping_cart {
  width: 300px !important;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .widget_shopping_cart {
    margin-left: -110px;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .widget_shopping_cart {
    margin-left: -110px;
  }
}
.widget_shopping_cart .woocommerce-mini-cart {
  width: 300px !important;
  background-color: rgb(222, 222, 222) !important;
}
.widget_shopping_cart .woocommerce-mini-cart .woocommerce-mini-cart-item {
  padding-left: 5px;
}
.widget_shopping_cart .woocommerce-mini-cart .woocommerce-mini-cart-item a {
  padding-left: 20px;
  color: #000 !important;
}
.widget_shopping_cart .woocommerce-mini-cart .woocommerce-mini-cart-item a::before {
  font-size: 18px;
}
.widget_shopping_cart .woocommerce-mini-cart .woocommerce-mini-cart-item .quantity {
  padding-left: 20px;
}
.widget_shopping_cart p {
  background-color: rgb(222, 222, 222) !important;
}
.widget_shopping_cart .woocommerce-mini-cart__buttons a:nth-child(1) {
  background-color: rgb(57, 110, 198) !important;
}
.widget_shopping_cart .woocommerce-mini-cart__buttons a:nth-child(1):hover {
  background-color: rgba(57, 110, 198, 0.8) !important;
}

Con este código css obtendremos los resultados que podemos ver en la imagen del post.