Topic: Button Block – Add Text Above

pro123
February 20, 2024 at 11:36 am

Hi Team,

Is it possible to show text above the button when you hover over the button with the mouse or just fix above the button on mobile? The button size is too small to add the text within the button itself.

Please see the sample site in private section
Ying
February 20, 2024 at 1:03 pm

Hi there,

Before we look into the possibility of showing the text, are you trying to use GB button to present the product color options?

If so, how are you planning to make it work?
pro123
February 20, 2024 at 1:10 pm

Hi Ying,

Yes, you are correct. I am indeed trying to use the GB button to select the product color options.

Each single button will get a separate color and unique link. So each button will link to a different page with that specific product color.
Ying
February 20, 2024 at 1:26 pm

Oh I see, if it’s just a link, it should be no problem.

Can you try:

1. Add an additional CSS class to the parent container of this section, eg. color-buttons.
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

2. Add text to the button.

Once it’s done, let me know, I’ll check if there’s a CSS solution.
pro123
February 21, 2024 at 11:19 am

Hi Ying,

1, CSS class added to the container: color-buttons
2. I have added text in a few buttons. The only issue now is that the text size determines the size of the button.

3. I have added a webpage in the private section where you can see the same idea. The text is displayed on a fixed location above the buttons
Ying
February 21, 2024 at 11:37 am

Hum…sorry, I forgot to tell you to select an icon for the buttons, so the text and the icon can have their own classes that can be targeted with CSS.

Let me know when it’s done.
pro123
February 21, 2024 at 11:52 am

Icon is now selected for each button.
Ying
February 21, 2024 at 12:05 pm
1. Select the color-buttons container, set position to relative, set padding-top to 2em.

2. Add this CSS:
```
.gb-container.color-buttons .gb-button > :is(.gb-button-text,.gb-icon) {
    display: none;
}

.gb-container.color-buttons .gb-button:hover > .gb-button-text {
    display: inline-block;
    position: absolute;
    top: 0;
    left:0;
}
```
3. The text will show on top of the icons, but with the prefix text Selecteer een hoeslaken kleur: it will be difficult to position, I would recommend removing the entire container.
pro123
February 21, 2024 at 12:39 pm

Thank you very much Ying! It is working as expected.
Ying
February 21, 2024 at 1:00 pm

You are welcome 🙂
pro123
April 6, 2024 at 4:14 am

Hi Ying,

One other question related to this topic.

The provided solution will showcase various colors for a single product page in WooCommerce using an element hook – button module. Is it feasible to extend this functionality to display the color buttons beneath the product image on the WooCommerce category page, while considering the following details:

– Reducing the button size on the category page under the image
– A feature where clicking on a button changes the main image along with the product link.
– Limiting the displayed colors to a maximum of five buttons under the image, with any additional colors represented as a numerical indicator (“4”).

In the private section, I have a sample website for reference, demonstrating the requirements above. This sample site is exactly what I am looking for

Thanks for checking
David
April 6, 2024 at 7:26 am

Hi there,

that kind of functionality would require custom development or a plugin.
There are a few Woocommerce Plugins that add Custom Swatches to the single post that i know of. Perhaps one of them extends the archive pages too ?
pro123
April 10, 2024 at 10:58 am

Hi David,

Thanks!
I will check then for a custom development. The archive page was only an example indeed.
David
April 11, 2024 at 2:17 am

You’re welcome
pro123
April 16, 2024 at 8:58 am

Hi Team,

Rather than opting for custom development, I opted to install a WooCommerce Plugin for Custom Swatches. However, following installation, I encountered a compatibility issue between the GP Theme and the plugin.

Specifically, on the product category page, I noticed that the product image doesn’t switch when selecting a different color attribute beneath the product. Instead, the product images only change upon hovering over them with the mouse. Disabling the “Display secondary image on hover” option in GP resolves this issue. Please refer to the private details for more information.

Can you support to fix this compatibility issue. I would like to use the GP option “Display secondary image on hover”

Thanks!
Ying
April 16, 2024 at 11:06 am

The plugin is not Woocommerce, but a 3rd party plugin.

We can not guarantee compatibility with 3rd party plugins, unfortunately.

There might be a JS conflict between GP’s hover to show 2nd image function and the 3rd party plugin’s color choice function.

Viewing 16 posts - 1 through 16 (of 18 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Button Block – Add Text Above