Product View

Is it possible to move the price to the left side and discount percentage to the right side on the product category page? Also, a divider between the title and the price?

I have attached a link for reference.

Hi,

Could you please provide us your website link so we can take a look what can we do here?

Kind Regards

Yeah sure

Try to add the following code snippet to the Custom CSS area in Theme Settings

body .product-grid-item.product-type-simple:not(.product-list-item) .price {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

body .product-grid-item.product-type-simple.sale:not(.product-list-item) .price {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}

body .product-grid-item:not(.product-list-item) .price {
  text-align: left;
  border-top: 1px solid #f0f0f0;
  padding-top: 5px;
}

Regards

Thank you so much. Would you please tell me how do I move the Product title to the left?

Try to add this code snippet.

body .product-grid-item .product-title {
	text-align: left;
}

Regards

[Author]

Posts