problem replace icon Product add to cart

Hi, I has new layout for products for carousel with Product loop item .

The domain staging.shopbuy.gr.

Because I have made several changes with css to create this.

How can I change the icon in the cart that appears when I press the Product add to cart button and generally the text size?
From within the edit with guterberg it won’t let me.

How can I change the appearance of the button when I click on the Menu in the header? (02.jpg)

I want it to appear like in 03.jpg. (https://shopbuy.gr ) see the header.

Layout new.

Βest Regards
Sampanis Ioannis

Attachments:

You must be logged in to view attached files.

Hello,

01. Define it in Theme Settings -> Custom CSS.

.wd-add-btn-replace a {
    --wd-btn-icon: "\f106"; /* example: another icon code */
}

Then, navigate to Typography > Icons fonts > Check the icons and change the content code as per your requirements.

For the text size, navigate to Theme Settings > Styles and Colors > Buttons > In the Advanced button styles section, you can select the “Add to cart” button in the dropdown and change the colors.

Please follow this guide: https://xtemos.com/docs-topic/advanced-button-styles/

02. Define it in Theme Settings -> Custom CSS. Change the code as per your requirements.

/* 1. Remove the default background‑circle effect */
.wd-nav.wd-style-bg > li > a:before {
    display: none;
}

.wd-nav.wd-style-bg > li > a {
    padding: 5px 12px; /* adjust to match your design */
}

/* 3. Hover style: light background and slightly brighter text */
.wd-nav.wd-style-bg > li:hover > a,
.wd-nav.wd-style-bg > li.wd-opened > a,
.wd-nav.wd-style-bg > li.current-menu-item > a {
    background: #f5f5f5; /* light gray background like shopbuy.gr */
    color: #0083c1;       /* blue‑like hover text; adjust as needed */
    text-decoration: none;
}

Best Regards

Hi,

For the first question, I don’t want to change the icon with one of the icon fonts, but with my own svg file.

Like the one below, I’ve done it with css for .wd-add-btn.wd-action-btn , but it doesn’t work no matter what code I add.

https://staging.shopbuy.gr/wp-content/uploads/2026/01/02_new_ok.svg

For changing the add button, I have seen this setting, but it only changes the button on the single product. I want to change the size of the text on the add to cart button in the layout creation process with loop item.

Βest Regards
Sampanis Ioannis

Hello,

Define it in Theme Settings -> Custom CSS.

.wd-add-btn-replace > a {
    --wd-btn-icon: none;
}

.wd-add-btn-replace > a:before {
    content: "";
    background-image: url("https://staging.shopbuy.gr/wp-content/uploads/2026/01/02_new_ok.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
}

.wd-loop-prod-btn.wd-add-btn-replace>a>span {
    font-size: 18px !important;
}

Best Regards

[Author]

Posts