Archived topic
Product Add to cart, sale and Related Products Positions
5 replies · Started by Gurer on May 6, 2020
Hi,
1- How can I change the place of related products in product pages? I want to show below product image and full with inside container.
https://ibb.co/qJYMmhj
2- How can I move the sale badge on product images to top left corner with no radius?
3- How can I move the add to cart button on product images to bottom center?
Thanks
Hi there,
1. You could try this:
remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);
add_action('generate_after_main_content', 'woocommerce_output_related_products', 20);
2. This should do it:
.woocommerce ul.products li.product.sales-flash-overlay .onsale {
left: 0;
right: auto;
border-radius: 0 !important;
}
3. Bottom center of what exactly?
Let me know :)
Hi,
Thanks for your kind reply,
1- Where will I put this code and execute?
2- Solved, thanks!
3- Please see the screenshot.
https://ibb.co/9yTcpN9
Best regards
Hi there,
1. That code is PHP - this article explains:
https://docs.generatepress.com/article/adding-php/
3. Not easy to do that. But you can remove this CSS from Customizer > Additional CSS to put the Button back to its default position:
.woocommerce ul.products li.product {
overflow: hidden;
}
.woocommerce ul.products li.product:hover .button {
-webkit-transform: translatey(0) !important;
transform: translatey(0) !important;
}
.woocommerce ul.products li.product .button {
font-size: 12px;
line-height: 15px;
padding: 8px 12px;
min-height: 15px;
font-weight: bold;
text-transform: uppercase;
}
.woocommerce ul.products li.product .button.loading {
padding-right: 30px;
}
@media (min-width: 1024px) {
.woocommerce ul.products li.product .button {
position: absolute;
top: 0;
-webkit-transform: translatey(-150%);
transform: translatey(-150%);
-webkit-transition: 0.35s;
transition: 0.35s;
margin-top: 10px;
margin-left: 10px !important;
}
}
Thanks, you are great people.
Glad we could be of help