product page style

How do I make the price and add cart button in the style of the attached image? If possible with a similar gray background, and with the discount element below the price similar to image

Attachments:

You must be logged in to view attached files.

Hello,

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

.single-product-page .price {
	display: flexbox;
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	-webkit-justify-content: flex-start;
	-ms-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
}

.single-product-page .price del {
	-webkit-order: 1;
  	-ms-order: 1;
  	order: 1;
  	margin-left: 5px;
}

For the add icon before the add to cart button use this code. Change the value as per your requirements.

body .single_add_to_cart_button:before {
	position: absolute;
	inset-inline-start: 0;
	content: "\f07a";
  font-family: "Font Awesome 5 Free";
	opacity: 1;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: all .3s ease;
}

Do not forget to enable the “Font Awesome” library via Theme Settings -> Performance -> Fonts & Icons.

Try to add the following PHP code in the function.php of the child theme.

// For product variations
 add_filter( 'woocommerce_available_variation', 'custom_variation_price_saving_percentage', 10, 3 ); function custom_variation_price_saving_percentage( $data, $product, $variation ) { $active_price = $data['display_price']; $regular_price = $data['display_regular_price']; if( $active_price !== $regular_price ) { $saving_percentage = round( 100 - ( $active_price / $regular_price * 100 ), 1 ) . '%'; $data['price_html'] .= sprintf( __('<p class="saved-sale">Save: %s</p>', 'woocommerce' ), $saving_percentage ); } return $data; }

// For simple products 
add_filter( 'woocommerce_get_price_html', 'change_displayed_sale_price_html', 10, 2 ); function change_displayed_sale_price_html( $price, $product ) { // Only on sale products on frontend and excluding min/max price on variable products if( $product->is_on_sale() && ! is_admin() && $product->is_type('simple') ){ // Get product prices $regular_price = (float) $product->get_regular_price(); // Regular price $sale_price = (float) $product->get_price(); // Active price (the "Sale price" when on-sale) // "Saving Percentage" calculation and formatting $precision = 1; // Max number of decimals $saving_percentage = round( 100 - ( $sale_price / $regular_price * 100 ), $precision ) . '%'; // Append to the formated html price $price .= sprintf( __('<p class="saved-sale">Save: %s</p>', 'woocommerce' ), $saving_percentage ); } return $price; }

Best Regards.

error in functions.php

Attachments:

You must be logged in to view attached files.

Hello,

You are missing the unclosed brackets.Please check the code for missing curly braces.

If the issue remains, share the wp logins details i will check and give you a possible solution.

Best Regards.

Hello, you provided me with the php code that gave me an error, please check as I don’t understand php to correct this, check the previous messages where you provided me with the code and send me the correct code please

Hello,

Can you please share the wp logins details of your site in the private area so i will closer look on your site and solve the issue on your site.

Best Regards.

I managed to put the code, but I want the button next to the price as in the image I sent as an example above, currently the button is still below the price, and I want a gray background behind the price and the button as in the example too

Attachments:

You must be logged in to view attached files.

Hello,

Please try to use the below custom CSS code and paste it to Theme Settings >> Custom >> CSS >> CSS for Desktop section:

.woocommerce-variation-add-to-cart {
    display: inline-block;
}
div.woocommerce-variation {
    display: inline;

}
button.single_add_to_cart_button.button.alt {
    width: 320px;
    left: 5%;
}

Best Regards.

Why when I change the color of the button do the other css that align the page stop working? It’s much worse on mobile

Attachments:

You must be logged in to view attached files.

Hello,

I have changed the button background from Styles and colors > Buttons. It is not affected the alignment of the button:
https://ibb.co/y0qdX7Q

Check back your site after completely clearing the browser cache and check the issue.

Best Regards.

I just don’t understand why I was already doing this but it didn’t work hahaha, but now it works thank you

Você me passou esse codigo para alinhar o botão ao lado do preço, tem como deixar esse botão sempre alinhado a direita? pois sempre que muda o preço, no caso acrescenta um numero no preço o botão vai mais pra direita, tem como deixar ele fixo na direita?

.woocommerce-variation-add-to-cart {
display: inline-block;
}
div.woocommerce-variation {
display: inline;

}
button.single_add_to_cart_button.button.alt {
width: 320px;
left: 5%;
}

Hello,

Sorry, this is not possible. The buttons moves because of the widget of the price and add to cart button which are on the same line so you can not fix it on the right side.

Best Regards.

OK thanks

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts