Woocommerce Product image in Avia Builder using wooswatches - Support

Tagged: custom page, featured image, Product page, woocommerce

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
November 14, 2019 at 11:39 am #1156711

stefan30
Participant

Hi,
Ich benütze Woocommerce mit dem plugin wooswatches (image variation swatches). Damit können Produktvariationen über ein Bild (z.B. Farbe, größe…) gewählt werden und das Produktbild wird dazu entsprechend geändert.

Ich möchte gerne die Produktseiten mit dem Avia Layout Builder gestalten. Dies funktioniert auch alles super, jedoch kann ich das Produktbild nicht wechseln. Dazu müsste ich mit einem Hook oder Shortcode den original Container des Bild über den Avia Builder laden können.
Das Plugin Wooswatches tauscht die Bilder natürlich nur im original Bildcontainer aus.
Gibt es eine möglichkeit den Bildcontainer Featured Image oder Gallery über den Avia Builder zu laden?

Danke für die Antwort!

November 19, 2019 at 4:00 am #1157997

Ismael
Moderator

Hey stefan30,

Thank you for the inquiry.

Is there a way to load the image container Featured Image or Gallery via the Avia Builder?

This might be possible using a custom shortcode and by calling the get_the_post_thumbnail function within it. The function retrieves the post’s featured image or post thumbnail.

// https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/

And here’s the documentation for a custom shortcode.

// https://codex.wordpress.org/Shortcode_API

After creating the shortcode, you can use it within a text or code block in the advance layout builder. Unfortunately, we can’t help you with the modification because it’s beyond the scope of support.

Best regards,
Ismael

December 13, 2019 at 11:45 am #1165476

Mike
Participant

Hi Stefan,
hast du eine Lösung gefunden für dich? Wir bauen auch via Advanced Layout Builder und stehen vor dem gleichen Problem.

Hi Ismael,
quite frustrating that Enfold didnt make this work after so many years. being able to design proper products with the advanced layout editor is not too much to ask I suppose. and in fact the gallery seems to be the only thing not synching in terms of variable products/swatches.

December 16, 2019 at 11:32 am #1166312

Günter
Keymaster

Hi,

Thank you for using Enfold.

I added it to our feature request list.

Best regards,
Günter

April 6, 2020 at 4:21 pm #1201271

Soulbuddycaps
Participant

Hi,
auch wir haben das Problem, dass die WooCommerce Product Gallery im Endfold Avia Layout Builder nicht ausgespielt wird, und man diese auch nicht als Media Element auswählen kann, um die Produkt Galerie in die Seite zu integrieren.
Wir arbeiten mit „Variation Swatches for WooCommerce – Pro” von Emran Ahmed. Die Bilder der Produktvarianten werden bei WooCommerce in die Produkt Galerie geladen. Mit einer manuell auf der Avia Layout Bilder-Seite eingebetteten Galerie funktioniert die Variation Swatches Funktion nicht.

1) im Dezember kam die Antwort, dass dieses Problem zur „feature request list“ hinzugefügt wurde. –> wann wird es eine Lösung geben?
2) gibt es eine Möglichkeit die WooCommerce Produkt Galerie über Umwege in die Avia Layout Builder Seite zu integrieren? Plugin? CSS?

Liebe Grüße,
Doro

April 6, 2020 at 4:53 pm #1201277

Soulbuddycaps
Participant

Hi,

ich meine die “Product Image Gallery“, also nicht die Übersicht verschiedener Produkte, sondern die Bilder, die ich einem Produkt und seinen zugeordnet habe.

Liebe Grüße Doro

April 14, 2020 at 3:30 am #1203423
Ismael
Moderator
Hi,

Thanks for chiming in. You can create a custom shortcode that renders the default product gallery. Add this code in the functions.php file.
```
add_shortcode( 'avs_product_gallery_hook', 'avs_product_gallery_hook_callback' );
function avs_product_gallery_hook_callback( $atts ) {
	ob_start();
	woocommerce_show_product_images();
	$content = ob_get_clean();
    return $content;
}
```
Edit a product, switch to the advance builder and in a text or code block, add the shortcode.
```
[avs_product_gallery_hook]
```
Best regards,
Ismael
April 18, 2020 at 5:50 pm #1205062

audreyweddingsalon
Participant

I tried using this shortcode but the product image only shows up very large at the top of the page below the header.
It ignores the place where I put the shortcode in the avia builder. Eg. when I put a text field above the code block with the short code then this text is shown below the picture(s) of the product.

Is there a way to get these product pictures into a specific place in a layout?

Thanks,
Sascha

April 22, 2020 at 9:46 am #1206095

Ismael
Moderator

Hi,

Thank you for the update.

We adjusted the code above a bit. Please delete the previous snippet and replace it with the latest version.

Best regards,
Ismael

January 28, 2021 at 10:33 pm #1276179

MIMMT
Participant

Thanks for this snippet of code.

Can I ask if you have a way to remove the numbering next to the images and if you are close to adding this feature to the advanced layout builder.

February 1, 2021 at 3:50 am #1276644

Ismael
Moderator

Hi,

What do you mean by numbering? Could you provide a link to the product page with the gallery so that we could check it? Unfortunately, there is no plan on integrating this feature in the theme anytime soon, so you will have to continue using the code above for the moment.

Best regards,
Ismael

February 3, 2021 at 3:45 pm #1277393

dmmediaks
Participant

Thanks for the shortcode written above. However, clicking on the image does not open the image , can you link it somehow? Or better yet show it instead of the product image?

February 4, 2021 at 5:49 am #1277533

Ismael
Moderator

Hi,

@dmmediaks: Would you mind providing a link to a page with the gallery so that we could check it? Please post the details in a new thread or ticket if possible.

Best regards,
Ismael

February 4, 2021 at 7:49 am #1277615

dmmediaks
Participant

Aktionstor 2020 Angebot bis 31.12.2020 zusätzlicher Handsender kostenlos zum RenoMatic Garagentor Sektionaltor mit Antrieb 5000 mm Breite

February 5, 2021 at 3:38 pm #1278052

Ismael
Moderator

Hi,

We just found out that it is the default markup of the product gallery — the images are not linked by default. You have to override the woocommerce\templates\single-product\product-image.php file and add the links manually. For more info on how to override a product template, please check the following documentation.

// https://docs.woocommerce.com/document/template-structure/

We will close this thread for now. Please do not hesitate to open another if you need more help.

Best regards,
Ismael
Author

Posts