Add to cart edit size text & hover, popup added to cart

Hi,

1.is there a way to increase the size of text add to cart button and how to disable the hover effect so that it does not show the little cart icons but remain only the text?
2. Increase and change price size and color (and when is sale price)
3.i want to show product added to cart in pop up added to cart.
4.how to change single product view like picturre atached
5.change product grid in shop page as picture

best regards

Attachments:

You must be logged in to view attached files.

6.for the question 1 this option must be used and for variable products

Attachments:

You must be logged in to view attached files.

Hello,

1) Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.product-grid-item .wd-add-btn>a:focus span:not(.wd-tooltip-label), .product-grid-item .wd-add-btn>a:hover span:not(.wd-tooltip-label), .wd-hover-base:not(.product-in-carousel):not(.hover-width-small):not(.add-small-button) .wd-add-btn>a:focus span:not(.wd-tooltip-label), .wd-hover-base:not(.product-in-carousel):not(.hover-width-small):not(.add-small-button) .wd-add-btn>a:hover span:not(.wd-tooltip-label), .wd-hover-button .hover-mask>a:focus span:not(.wd-tooltip-label), .wd-hover-button .hover-mask>a:hover span:not(.wd-tooltip-label), .wd-hover-info-alt .product-actions>a:focus span:not(.wd-tooltip-label), .wd-hover-info-alt .product-actions>a:hover span:not(.wd-tooltip-label), .wd-hover-quick .wd-add-btn>a:focus span:not(.wd-tooltip-label), .wd-hover-quick .wd-add-btn>a:hover span:not(.wd-tooltip-label), .wd-hover-standard .btn-add>a:focus span:not(.wd-tooltip-label), .wd-hover-standard .btn-add>a:hover span:not(.wd-tooltip-label), .wd-price-table .wd-plan-footer .add-to-cart-loop:focus span:not(.wd-tooltip-label), .wd-price-table .wd-plan-footer .add-to-cart-loop:hover span:not(.wd-tooltip-label) {
    transform: none!important;
}
.product-grid-item .wd-add-btn>a:before, .wd-hover-base:not(.product-in-carousel):not(.hover-width-small):not(.add-small-button) .wd-add-btn>a:before, .wd-hover-button .hover-mask>a:before, .wd-hover-info-alt .product-actions>a:before, .wd-hover-quick .wd-add-btn>a:before, .wd-hover-standard .btn-add>a:before, .wd-price-table .wd-plan-footer .add-to-cart-loop:before {
    content: none!important;
}

2) Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

body .price del .amount {
color: red;
}

body .price ins .amount {
color: blue;
}

3) Sorry but there is no option in Theme Settings available for that.

4) You forgot to attach the screenshot.

5) You can find the product grid settings under Theme Settings >> Products Archive.

Screenshot: https://gyazo.com/c681719b02b90a3b18cdf0a00253384b

6) Could you please elaborate what you require with the help of some more relevant screenshots.

Note: Please create new topics for each issue in the support system to avoid any confusions.

Best Regards

Hi,

for the first question i followed your code and changed some details as below:

.product-grid-item .wd-add-btn>a:focus {
border-radius: 10px;
}
span:not(.wd-tooltip-label), .product-grid-item .wd-add-btn>a:hover span:not(.wd-tooltip-label), .wd-hover-base:not(.product-in-carousel):not(.hover-width-small):not(.add-small-button) .wd-add-btn>a:focus span:not(.wd-tooltip-label), .wd-hover-base:not(.product-in-carousel):not(.hover-width-small):not(.add-small-button) .wd-add-btn>a:hover span:not(.wd-tooltip-label), .wd-hover-button .hover-mask>a:focus span:not(.wd-tooltip-label), .wd-hover-button .hover-mask>a:hover span:not(.wd-tooltip-label), .wd-hover-info-alt .product-actions>a:focus span:not(.wd-tooltip-label), .wd-hover-info-alt .product-actions>a:hover span:not(.wd-tooltip-label), .wd-hover-quick .wd-add-btn>a:focus span:not(.wd-tooltip-label), .wd-hover-quick .wd-add-btn>a:hover span:not(.wd-tooltip-label), .wd-hover-standard .btn-add>a:focus span:not(.wd-tooltip-label), .wd-hover-standard .btn-add>a:hover span:not(.wd-tooltip-label), .wd-price-table .wd-plan-footer .add-to-cart-loop:focus span:not(.wd-tooltip-label), .wd-price-table .wd-plan-footer .add-to-cart-loop:hover span:not(.wd-tooltip-label) {
transform: none!important;
}
.product-grid-item .wd-add-btn>a:before, .wd-hover-base:not(.product-in-carousel):not(.hover-width-small):not(.add-small-button) .wd-add-btn>a:before, .wd-hover-button .hover-mask>a:before, .wd-hover-info-alt .product-actions>a:before, .wd-hover-quick .wd-add-btn>a:before, .wd-hover-standard .btn-add>a:before, .wd-price-table .wd-plan-footer .add-to-cart-loop:before {
content: none!important;
}

.product-image-summary .single_add_to_cart_button {
margin-bottom: 10px;
}
.single_add_to_cart_button {
border-radius: 10px;
}
.btn, .button, button, [type=”submit”], [type=”button”] {
padding: 12px 20px;
font-size: 16px;
line-height: 18px;
}
.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.add-to-cart-loop {
height: 59px;
width: 184px;
border-radius: 10px;
}
.wd-hover-standard .add-to-cart-loop span {
font-size: 16px! important;
padding: 10px 14px;
line-height: 16px;
}
.wd-hover-standard .wd-add-btn>a {
border-radius: 10px
}

now its ok

thank you

[Aizaz Imtiaz Awan]

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.

• This reply was modified 3 years, 5 months ago by Aizaz Imtiaz Awan.

[Author]

Posts