How can I display “Select options” instead of “Add to cart”

My products are of the “simple” type, but I’ve installed the attribute plugin “Advanced Product Fields Extended for WooCommerce”.

I’m encountering two problems:

1. On the desktop product list page, when the mouse hovers over a product image, a “Select options” button appears at the bottom of the product, which is great and what I want. However, when the mouse hovers over the “Select options” button, a shopping cart icon appears. I want to keep only the “Select options” button and not the “Add to cart” icon. Although my products are of the “simple” type, I’ve implemented many attributes using the attribute plugin. Please see images 1.png, 2.png, and 3.png

2. On the mobile product list, the shopping cart button is displayed (see image 4.png). This is not what I want. I want the “Select options” button to always be displayed (see image 5.png, which is from another website).

Attachments:

You must be logged in to view attached files.

5.png

Attachments:

You must be logged in to view attached files.

Hello,

01. Please use the below custom CSS code and paste it to Theme Settings > Custom CSS > Global CSS section:

/* Hide the shopping cart icon inside the quick hover button */
.wd-product.wd-hover-quick .wd-add-btn > a:hover:before {
    display: none !important;
}
.wd-product.wd-hover-quick .wd-add-btn > a:hover .wd-action-text {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
}

02.Please use the below custom CSS code and paste it to Theme Settings > Custom CSS > Mobile CSS section:

.wd-product.wd-hover-quick .wd-add-btn .add-to-cart-loop {
        width: 100% !important;
        padding: 10px 15px !important;
    }

/* Reveal the default action text wrapper on small screens */
.wd-product.wd-hover-quick .wd-add-btn .wd-action-text {
        display: inline-block !important;
    }

/* Remove the absolute cart graphic layout icon block */
.wd-product.wd-hover-quick .wd-add-btn .add-to-cart-loop:before {
        display: none !important;
    }

Best Regards

very very good, Thanks, After I saved the first CSS snippet you gave me to Global CSS, the first problem was perfectly solved (see 6.png). After I saved the second CSS snippet to Global CSS, the “Select options” button was displayed on mobile devices, but a new problem arose: the height of the “Select options” button was incorrect (see 7.png).

Attachments:

You must be logged in to view attached files.

Please check Private content, I have one more question, thanks

Attachments:

You must be logged in to view attached files.

Hello,

02. I have checked your site, and the select option button is showing fine.

See Screenshot for clarification: https://postimg.cc/kBnBqMQ2

03. This is expected behavior. Woodmart generates separate navigation markup for desktop and mobile devices, so the menu links may appear twice in the page source. Only the relevant menu is displayed to visitors.

This does not cause any SEO issues and is a common practice in responsive themes.

Best Regards

Hi

Thanks for your fast reply
Your theme is the best in the world, and your customer service is also the best in the world.

Image 6.png shows the desktop version of the Select options button with a perfectly good height before adding the second CSS snippet.

Image 7.png shows the desktop version of the Select options button with a much higher height after adding the second CSS snippet.

The mobile version of the Select options button has a perfectly good height.

Attachments:

You must be logged in to view attached files.

Hello,

Your issue has been resolved.

I have moved the second CSS snippet from the Global Custom CSS area to the Mobile CSS section, so it will now only apply on mobile devices and will no longer affect the desktop layout.

Please check and confirm if everything is working correctly now.

Best Regards

[Author]

Posts