Prices adjustment and alignment

Hi there,

I’ve added a new feature to the child theme that calculates sale prices, like you can see in the picture I provided. I also want to make a few changes. I want the original price with a line through it to move down a bit, and I want the amount showing how much is saved to be lined up with the price on the right side.

Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Best Regards

I have provided you in a private content

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.product-grid-item .product-element-bottom > .wrap-price > .price {
		display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.product-grid-item .product-element-bottom > .wrap-price > .price ins {
	order: -1;
}

.product-grid-item .product-element-bottom > .wrap-price > .price del {
	width: fit-content;
}

Best Regards

Hi Elise Noromit, Thanks for your reply.

I have added the code as you told me, But that CSS did not change anything.

Hello,

We have checked and we do not see the custom code on your site. Please add this code to the Theme Settings > Custom CSS > Global. Please leave the code there even if it does not work so that could enter and check the reason.

If you have any questions please feel free to contact us.

Best Regards

Hi , Yes I removed the code this morning, But I have added now back the code do not change anything.

Hi,

Your previous custom code has syntax errors which breaks all subsequent code:

1. Misspell of :is() CSS pseudo-class function. Screenshot https://prnt.sc/LQtviB4PE7o9
2. CSS unrelated dot. Screenshot https://prnt.sc/saO9dz770RL5

Before adding any new additional code, try to fix all previous errors and check again.

Kind Regards

Thank you so much, I want a similar css function for the Categories page product price and also for a single product price as well.

Can you please help ? I am waiting for it

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

This custom is for the product category:

.product-grid-item .product-element-bottom > .price {
		display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.product-grid-item .product-element-bottom > .price ins {
	order: -1;
}

.product-grid-item .product-element-bottom > .price del {
	width: fit-content;
}

This code is for the single product:

body .wd-single-price .price {
		display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
		text-align: left;
}

body .wd-single-price .price ins {
	order: -1;
	text-align: left;
}

body .wd-single-price .price ins:before {
	display: none !important;
}

body .wd-single-price .price del {
	width: fit-content;
  text-align: left;
}

body .wd-single-price .price del .amount {
	margin: 0;
}

Best Regards

Hi Elise, Thank you so much for the code.

You are welcome!

Wish you a wonderful day!

[Author]

Posts