Skip Navigation

[Resolved] Show custom fields on WooCommerce image hover state

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to show custom fields and the wpv-woo-buy-or-select shortcode when I hover over my WooCommerce product image, but the link does not work.

Solution: It's not possible to use the wpv-woo-buy-or-select shortcode inside a link tag, because it generates its own link tag. Nested link tags are invalid HTML and will not behave as expected. Therefore, you must use a different method to create the hover effect if you want to place the wpv-woo-buy-or-select shortcode in the hover.

This support ticket is created 6 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

Author
Posts
#617024

Hi,

I work on discover-wp to do solution, when will be I move to my domain.

On my new project I want use your demo content: hidden link (yes this is mine)
But one think is missing, Archives - Products: Custom fields on hover image.
This solution is on hidden link (Yes this is my): hidden link

I am trying to integrate it but it does not go out.

Now I have this: hidden link

I need this: hidden link

I do this: hidden link

First I go and creat custom fields:
hidden link

I go to: Toolset > WordPress Archive > Products listing

Find this:
<div class="[wpv-post-class add='panel']">

[wpv-woo-onsale]
[wpv-post-featured-image size="shop_catalog" class="aligncenter"]

<div class="panel-body text-center">
<h3>[wpv-post-link]</h3>
[wpv-woo-product-price]
[wpv-woo-products-rating-listing]
[wpv-woo-buy-or-select add_to_cart_text='' link_to_product_text='' group_add_to_cart_text='' external_add_to_cart_text='' show_quantity_in_button='no' show_variation_options='no']
</div>
</div>

Replace with this:
<div class="classifieds-slider">

[wpv-post-featured-image size="shop_catalog" class="aligncenter"]

[wpv-post-title]

[wpv-woo-product-price]
[wpv-woo-products-rating-listing]
[wpv-woo-buy-or-select add_to_cart_text='' link_to_product_text='' group_add_to_cart_text='' external_add_to_cart_text='' show_quantity_in_button='no' show_variation_options='no']


<div class="panel-body text-center">
<h3>[wpv-post-link]</h3>
[wpv-woo-product-price]
[wpv-woo-products-rating-listing]
[wpv-woo-buy-or-select add_to_cart_text='' link_to_product_text='' group_add_to_cart_text='' external_add_to_cart_text='' show_quantity_in_button='no' show_variation_options='no']
</div>
</div>

many thanks

#617175

Hi, it looks like you have nested the wpv-woo-buy-or-select shortcode inside a link tag:

<div class="classifieds-slider">
  <a href="[wpv-post-url]">
    ...other code...
    [wpv-woo-buy-or-select add_to_cart_text='' link_to_product_text='' group_add_to_cart_text='' external_add_to_cart_text='' show_quantity_in_button='no' show_variation_options='no']
    ...other code...
  </a>
</div>

This is a problem because the wpv-woo-buy-or-select shortcode creates another link tag. This results in one link tag nested inside another link tag, which is invalid HTML. You cannot place the wpv-woo-buy-or-select shortcode inside another link tag.

#621480

Topic to close.