Styling product grid and single product page – woocommerce

Hey Carolin,

Thank you for the inquiry.

You can use the following css code to create the adjustments listed above.

div .products .product {
	margin: 0 2% 2% 0;
	width: 23.25%;
}

#top .price, #top .price span, #top del, #top ins {
	font-size: 20px;
	line-height: 30px;
}

.products .product h2, .products .product h3, .products .product h4, .products .product h5, .products .product h6, h2.woocommerce-loop-product__title {
	font-size: 1.2em;
	line-height: 1.4em;
}

We don’t see the value added tax text in the grid. Did you remove it?

Best regards,
Ismael

Hi,

Thank you for the update.

You can prepend the “page-id-1094” class name in the css selectors to limit the styling to the shop page. Example:

.page-id-1094 div .products .product {
	margin: 0 2% 2% 0;
	width: 23.25%;
}

For the tax info in the single product page, please use this:

.wc-gzd-additional-info.tax-info {
	display: none !important;
}

Best regards,
Ismael

Hi,

Thank you for the clarification.

You can use this css code to move the shipping info in its own line, separating it from the tax info.

.wc-gzd-additional-info.shipping-costs-info.variation_modified {
	display: block !important;
}

Best regards,
Ismael

Hi,

Thanks for letting us know, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard