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

Home Forums Support Product Add to cart, sale and Related Products Positions

This topic contains 5 replies, has 3 voices, and was last updated by  David 2 weeks, 6 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1272777


    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.

    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?



    Tom Lead Developer

    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 🙂



    Thanks for your kind reply,

    1- Where will I put this code and execute?
    2- Solved, thanks!
    3- Please see the screenshot.

    Best regards


    David Customer Support

    Hi there,

    1. That code is PHP – this article explains:


    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.


    David Customer Support

    Glad we could be of help

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.