Customizing ‘Add To Cart’ Section Elementor PRO Single Product Template

  • Dear WP-Community,

    I’m currently working on my single product template which is made with Elementor Pro (I also have Woocommerce Installed). I think my request might be achievable with a custom CSS.

    I’m struggling with the ‘add to cart’ widget, there are 2 things I’d like to change:

    1. The black lines won’t change in color by default selection. I’d like to turn them grey. It seems like I can’t customize this in Elementor nor WP.

    2. I’d like to remove the word ‘size’ and place it in a shorter size dropdown beam. If this is not possible like I envisioned, I’d like to make the word ‘Size’ a bit smaller and fit the dropdown beam as pictured below.

    View post on imgur.com

    With Kind Regards,

    Elvin

    • This topic was modified 5 years, 10 months ago by elvinm94.
    • This topic was modified 5 years, 10 months ago by elvinm94.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hello,

    1. Go to Customize > General Options > General Styling and change the main border color.
    2. Can you share the site link so that I can check it?

    Thread Starter elvinm94

    (@elvinm94)

    I’ve added an link to a screenshot of the website.

    Left is original.

    Right is the way I’d like it to be.

    View post on imgur.com

    Try to add the below code to the Customize > Custom CSS section and check it works as per your need or not – 

    .woocommerce div.product form.cart .variations label {
    display: none;
}
.woocommerce div.product.elementor form.cart table.variations td.label {
    width: 0;
}
.woocommerce div.product.elementor form.cart table.variations td.value:before {
    display: none;
}
    Thread Starter elvinm94

    (@elvinm94)

    Dear Amit,

    It is still not showing it how I’d want it to be (more grouped). In edit mode everything looks grouped but when you visit the site it is out of line.

    This is the current state:

    View post on imgur.com

    I’d like it to look like this screenshot on the right area:

    View post on imgur.com

    The code I gave you will help you to achieve the same that you want. Can you share your site link so that I can check why it is not working on your site?

    Thread Starter elvinm94

    (@elvinm94)

    Here you go ??

    https://stellagami.nl/product/hoodie/

    For some reason it won’t work hmm.

    Use the below code instead of the previous one to fix it – 

    .woocommerce .elementor-506 .elementor-element.elementor-element-e0c2cbf form.cart table.variations td.value:before {
 display:none;
}
.woocommerce div.product.elementor form.cart table.variations td.value {
    width: 40%;
}
.woocommerce div.product.elementor form.cart table.variations td.label {
    width: 0;
}
.woocommerce div.product form.cart .variations label {
    display: none;
}
    Thread Starter elvinm94

    (@elvinm94)

    Hello Amit,

    The code is working correctly on the webbrowser now, but it is buggin on the phone.

    1. Can you move the block that is blue to the center and remove the arrows next to the number 1 (seen on firefox)?

    The website link
    https://stellagami.nl/product/the-squared-scribbled-short-top/

    Screenshot
    https://ibb.co/LpPcyfc

    2. Can you move the phone version of the block move to the center as well and fix the bug?

    Screenshot
    https://ibb.co/WxMYth3

    CSS CODE
    .reset_variations {
    display: none !important;
    }

    .woocommerce div.product.elementor form.cart table.variations td {
    border: none;
    }

    .woocommerce .elementor-506 .elementor-element.elementor-element-e0c2cbf form.cart table.variations td.value:before {
    display:none;
    }
    .woocommerce div.product.elementor form.cart table.variations td.value {
    width: 40%;
    }
    .woocommerce div.product.elementor form.cart table.variations td.label {
    width: 0;
    }
    .woocommerce div.product form.cart .variations label {
    display: none;
    }

    • This reply was modified 5 years, 9 months ago by elvinm94.
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Customizing ‘Add To Cart’ Section Elementor PRO Single Product Template’ is closed to new replies.