[Resolved] Product Add to cart, sale and Related Products Positions

[Gurer]

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

[Tom]

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 🙂

[Gurer]

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

[David]

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;
    }
}

[Gurer]

Thanks, you are great people.

[David]

Glad we could be of help

[Author]

Posts