Is there a shortcode for the product images gallery?

I use the plugin Fancy Product Designer. The configurator replaces the product image area on my single product page (link see in private content area).

My goal:
Displaying the gallery of the uploaded product images under the configurator.

As the Fancy Product Designer plugin uses the position of the product images, the images do not show up anymore. So I need to find a way to customize the single product page in a way that under the configurator the image gallery shows up.

How can I achieve that?

Hello,

This plugin replaces the gallery and WoodMart does not influence the performance of the plugin.

Please make the full backup of your site and check the issue on the Storefront theme to detect if our theme causes the problem. Storefront is a free theme developed by WooСommerce.

Best Regards

Is there a way to output the product images gallery via a shortcode that I can place somewhere within the template file?

Hello,

You can just use an image gallery and add the images you want to show in the product description or by means of EXTRA CONTENT OPTIONS Find our documentation tutorial about this here: https://xtemos.com/docs/woodmart/product-page-options/#local_settings and https://xtemos.com/docs/woodmart/html-blocks-2/#extra_content_options

If you have any questions please feel free to contact us.

Best Regards

I ended up using the xtemos element “gallery carousel” as shown here:
https://woodmart.xtemos.com/carousels/demo/electronics-2/#&gid=1&pid=2

My question:
How can I turn the lightbox background which currently is black to transparent white?

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.pswp__scroll-wrap, .pswp__share-modal {
background:#FFF;
}
body .pswp__img--placeholder--blank {
	background: #FFF;
}

If it does not work, please give me the page URL where you want to change the color.

Best Regards

Thank you, Elise, I achieved changing the color. But how can I add a transparency with an opacity of 0.5? I do not want the background to be fully white. Please see a link to the page with the image gallery in the private content box.

Hello,

You need to replace the that code with this one:

.pswp__scroll-wrap, .pswp__share-modal {
background:rgba(255,255,255,0.5);
}
body .pswp__img--placeholder--blank {
	background:rgba(255,255,255,0.5);
}

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts