Recreate Shop Menu and Display Attribute Tile under swatch

Hi,

I really like this theme, I just have a few questions.

How can i recreate the Shop menu? I tried doing a html block but can not find the right way to build it with the visual composer and what VC elements to use. Some screenshots would be super.

The other question is, how can i display the variation attribute “Title” bellow or above the circle/image swatch?

For some scenarios it would remove any doubt from the customer that they picked the right variation

Hello,

Thank you for contacting our support center.

1. You need to create HTML Block for your shop menu dropdown structure. You can see how it will look on this screenshot http://imgur.com/9wg1KPq
Then you need to past this block shortcoder ([html_block id=""]) and place it to the description field on Appearance -> Menus screen. Here is a screenshot of how it should look http://imgur.com/VKojiNW
If you want we can create you an example just provide us your admin access.

2. We can help you to show the name of the current attribute term name chosen on product variations as a free customization service, just set up child theme and provide your FTP access so we could do a few code changes.

Regards
Xtemos

Hi, thank you for your response.

Im running everything local right now, is there any way to get the modified files and I could add them to my child theme?

That would be fantastic. Again thank you for the awesome support.

It would be much easier for us to adapt this customization to your web-site when you will give us your server access, when you go live.

Thank you

2. We can help you to show the name of the current attribute term name chosen on product variations as a free customization service, just set up child theme and provide your FTP access so we could do a few code changes.

May be you will add examples code for this features to the FAQ?

Here is a code snippet that you need to add into your Custom CSS field in Theme Settings to show tooltips under swatches circles

.basel-swatch:before {
    display: block;
    opacity:0;
    visibility:hidden;
    border-radius:2px;
    position: absolute;
    top: -32px;
    left: 50%;
    background: #252525;
    color: white;
    font-size: 14px;
    font-weight: normal;
    text-transform: capitalize;
    content: attr(data-value);
    padding: 3px 8px;
    transform: translateX(-50%);
    transition: all 0.2s ease-in-out;
}

.basel-swatch:hover:before {
    opacity:1;
    visibility:visible;
    top: -27px;
}

Thanks a lot for this, i have been splitting my time between one to many projects so i haven’t been able to respond to your other comments.

This is awesome and i believe will be useful for a lot of your customers.

Again thank you!

Here is a code snippet that you need to add into your Custom CSS field in Theme Settings to show tooltips under swatches circles

Thanks!

You are welcome.

Here is a code snippet that you need to add into your Custom CSS field in Theme Settings to show tooltips under swatches circles

For future release ) data-value – contains atribute slug, but not name or description.. For non-english sites, it’s not good ) because in the tooltip displays only english text =)

Thank you for this note, we will take it into account.

[Author]

Posts