Images gallery in product description.

Hello,

I would like to add an image gallery to few of my product’s description, but I have found it difficult due to the amount of settings.

That’s the gallery from demo:
https://woodmart.xtemos.com/shop/furniture/reflect-chest-of-drawers

This part to be precise:
https://gyazo.com/8f9c056d29308da2117cbae2e0928d99

2 images on desktop, 1 on mobile with navigation arrows. Could you please provide me exact settings from the demo page or an option to copy it?

Regards,
Filip

Hello,

You can configure that in the Theme Settings > Single Product > Images. Please try this configuration: https://gyazo.com/de90b06943a2320d5712db8af598f6fc

Best Regards

Hello,

I’m not referring to the product gallery, please read my post again and check the image uploaded to gyazo.

Regards,
Filip

Hello,

The content is just the default WP bakery page builder image gallery. You need to upload images of the same size and proportion to get a nice view. https://gyazo.com/d700ac6ee893b49929f7ab2d3d05fb9b

Best Regards

Yeah, that’s what I did, but the result is far from the example from the demo. That’s the reason why I’m asking you for the settings or any other way to simply clone it from the demo page.

Hello,

Please care a page in defaulr WordPress and insert this shortcode in the test editor:

[vc_row full_width="stretch_row" content_placement="top" css=".vc_custom_1490278559844{padding-top: 50px !important;padding-bottom: 20px !important;background-color: #f9f9f9 !important;}"][vc_column width="1/3" css=".vc_custom_1490276860346{margin-bottom: 20px !important;padding-top: 0px !important;}"][woodmart_gallery images="81" view="grid" spacing="0" columns="1" caption="" img_size="700x450"][/vc_column][vc_column width="1/3" css=".vc_custom_1490276808780{padding-top: 0px !important;}"][woodmart_title style="underlined" color="primary" align="left" title="FAMES AD SODALES" css=".vc_custom_1490276130838{margin-bottom: 30px !important;}"][vc_column_text css=".vc_custom_1490276771363{margin-bottom: 20px !important;}"]Nostra condimentum dui cras sodales sed ut adipiscing ad suspendisse consectetur nam placerat sceler isque suspe ndisse ac parturient sit adip iscing nostra aliquet arcu.Ligula parturient sagittis vestibulum fames ad sodales etiam a a quis mauris parturient curabitur dictumst fringilla sed ac scelerisque fringilla laoreet sit class metus nullam.Eu scelerisque elementum taciti parturient ut adipiscing fusce.[/vc_column_text][/vc_column][vc_column width="1/3" css=".vc_custom_1490276804851{padding-top: 0px !important;}"][vc_column_text css=".vc_custom_1490276775431{margin-bottom: 20px !important;}"]Ligula a condimentum cubilia consectetur parturient conubia elit a orci conse ctetur risus conubia tincidunt potenti a litora urna tellus a interdum a amet tempor parturient.Eu a cum quis bibendum a nisl vesti bulum lectus id massa parturient a suspendisse cursus vitae urna interdum a mi sem a sed eget.

Elit ad ut a odio dis curae tempus rhoncus fusce potenti libero pharetra sem a.Volutpat vestibulum et a ad adipiscing ferme ntum faucibus litora natoque lobortis curabitur eu orci dui tinci dunt purus. Leo digni ssim nisl lectus ridiculus.[/vc_column_text][/vc_column][/vc_row][vc_row equal_height="yes" content_placement="top"][vc_column offset="vc_col-md-8 vc_col-xs-12"][woodmart_title style="underlined" color="primary" align="left" title="PLATEA NEC IPSUM" css=".vc_custom_1490276171718{margin-bottom: 34px !important;}"][woodmart_gallery images="81" view="grid" spacing="0" columns="1" caption="" img_size="1200x600"][vc_empty_space height="25px"][vc_column_text]Adipiscing commodo massa velit metus vestibulum sodales a sagittis id adipiscing risus platea scelerisque elementum platea nec ipsum condimentum a netus. Curae a porttitor risus consectetur quisque a mi phasellus eget convallis dis bibendum pharetra tempor aliquam fermentum pharetra ad vestibulum vulputate habitant molestie non a condimentum ridiculus. Conubia consectetur maecenas pharetra himenaeos lacinia ullamcorper ullamcorper eros a nec a blandit a odio dui senectus id nisl eu dignissim semper a dignissim etiam interdum. Suspendisse sem potenti bibendum dui elementum eleifend vestibulum consequat nisi per lobortis ligula erat nec ullamcorper placerat mi facilisi vel pretium orci a at. Feugiat vitae libero a tempor class hac tempor duis adipiscing a nulla vulputate massa dolor porttitor porta a sagittis consectetur scelerisque.[/vc_column_text][woodmart_gallery images="81" view="grid" spacing="0" columns="1" caption="" img_size="1200x600"][vc_empty_space height="25px"][vc_column_text]Morbi massa a molestie est turpis interdum cras eu mus nulla ut a condimentum sodales libero a a cras euismod facilisis venenatis vestibulum. Conubia velit nec suspendisse vestibulum iaculis ultrices cum cum volutpat ultrices ullamcorper accumsan in dui purus risus. Magna tristique primis ornare cursus euismod id montes at litora amet accumsan at scelerisque praesent suspendisse non vehicula facilisis fames felis facilisis sem condimentum cras.[/vc_column_text][woodmart_title style="underlined" color="primary" align="left" title="LITORA AMET ACCUMSAN" css=".vc_custom_1490276256380{margin-bottom: 34px !important;}"][woodmart_gallery images="81,80,79,78" view="carousel" spacing="20" slides_per_view="2" hide_pagination_control="yes" caption="" img_size="800x600"][vc_column_text]Ligula a condimentum cubilia consectetur parturient conubia elit a orci consectetur risus conubia tincidunt potenti a litora urna tellus a interdum a amet tempor parturient.Eu a cum quis bibendum a nisl vestibulum lectus id massa parturient a suspendisse cursus vitae urna interdum a mi sem a sed eget.Elit ad ut a odio dis curae tempus rhoncus fusce potenti libero pharetra sem a.Volutpat vestibulum et a ad adipiscing fermentum faucibus litora natoque lobortis curabitur eu orci dui tincidunt purus.Leo dignissim nisl lectus ridiculus platea.

Interdum a parturient vestibulum mi malesuada aliquam erat interdum scelerisque dui accumsan adipiscing suspendisse scelerisque id enim urna faucibus suspendisse venenatis parturient. Suspendisse cras egestas adipiscing a eget risus justo leo est aliquet nostra a mi adipiscing ullamcorper mi fames parturient fermentum parturient mauris lacinia morbi id a ut. Nisi potenti dis massa condimentum dis conubia faucibus scelerisque molestie ac nisl a eget suspendisse. Dictumst aenean eu aliquam dignissim nec a consectetur donec ad habitasse vivamus vulputate adipiscing parturient condimentum a. Dictumst dolor porta nulla in.[/vc_column_text][/vc_column][vc_column width="1/3" woodmart_sticky_column="true" css=".vc_custom_1490276686221{margin-top: 40px !important;margin-bottom: 25px !important;}" offset="vc_hidden-sm vc_hidden-xs"][vc_tta_accordion shape="square" color="white" c_icon="chevron" c_position="right" active_section="1" no_fill="true"][vc_tta_section title="ABOUT COMPANY:" tab_id="about-company"][vc_column_text]<img class="wp-image-3684 alignleft" style="margin-top: 10px;margin-right: 10px" src="http://sub1.yanaweb.net/wp-content/uploads/2017/06/brand-Joseph-Joseph-6.png" alt="" width="100" height="30" />Condimentum a vivamus taciti id aliquam at suspendisse parturient at tristique a cum laoreet a urna ipsum a at con sequat adipi scing adip iscing gravida iaculis praesent cons equat.

Mi ad consequat cras ut nibh nisl suscipit dolor. A id scele risque a adipiscing a primis habitant partu rient integer. Per tellus inte rdum parturient vulputate digni ssim laoreet.[/vc_column_text][/vc_tta_section][vc_tta_section title="INFO:" tab_id="info"][vc_column_text css=".vc_custom_1490272132809{margin-bottom: 20px !important;}"]Ligula a condimentum cubilia consectetur parturient conubia elit a orci consectetur risus conubia tincidunt potenti a litora.[/vc_column_text][vc_column_text]
<ul class="unordered-list">
	<li>Lorem ipsum dolor sit amet.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
	<li>Nunc dignissim risus id metus.</li>
	<li>Cras ornare tristique elit.</li>
	<li>Vivamus vestibulum nulla nec ante.</li>
	<li>Praesent placerat risus quis eros.</li>
	<li>Fusce pellentesque suscipit nibh.</li>
</ul>
[/vc_column_text][/vc_tta_section][vc_tta_section title="ADDRESS:" tab_id="address"][vc_column_text]514 S. Magnolia St.
Orlando, FL 32806[/vc_column_text][/vc_tta_section][/vc_tta_accordion][/vc_column][/vc_row][vc_row full_width="stretch_row_content_no_spaces" css=".vc_custom_1490619327616{margin-bottom: -70px !important;}"][vc_column][woodmart_gallery images="81,80,79,78,77,117" view="carousel" spacing="0" slides_per_view="5" hide_pagination_control="yes" hide_prev_next_buttons="yes" caption="" img_size="400x400"][vc_empty_space height="70px" el_class="vc_hidden-lg"][/vc_column][/vc_row]

Save this template and add into the product as shown in this tutorial: https://wpbakery.com/video-academy/use-templates-wpbakery-page-builder/

Then replace the content as per your needs.

Best Regards

Thanks for the reply.

1. I have added the gallery to the template and added it to the product page, but right now all of the images on that page are shown below each other.

2. Also, I wanted the gallery row to be the same width as the text above it, I mean I want it to be 1/1, not 3/4 on the desktop.

I’m adding the website link in private content.

Regards,
Filip

Hello,

Please enter the element set “Carousel” and specify 2 slides.
=https://prnt.sc/1u2jxty and https://prnt.sc/1u2jz38
If it does not work, insert the site credential into the Private content block below the message area.

Best Regards,

Yeah, it was set to 2 slides before and it was the same.

Please have a look what’s the effect I want to achieve, I did some editing in PS:
https://gyazo.com/f66da8cd96c686c0ceaac89128d58aa5

3 slides on desktop, the same width as the text above.
1 slide on mobile same as on the demo page.

Credentials attached.

Hello,

Please clear the cache and check again: https://gyazo.com/910406fe166bbcce4a4d29a7e5e4f733

You need to replace the blank images with yours.

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

Best Regards

That’s the image I have posted in my previous post, please have a look:
https://gyazo.com/f66da8cd96c686c0ceaac89128d58aa5

I would like to have 3 images on desktop, not 2 like it is right now. How can I do it?

Hello,

Please enter the Image slider and set 3 slides, you can find this option in the element option.

Best Regards

Changing the number of slides won’t change the width of the image gallery block. I want that block to be the same width as the description, that’s the point. That’s why I have edited the screen in Photoshop to give you an idea about what I want to achieve.

Hello,

The row that contains the gallery is 8 column width, make it 12 https://gyazo.com/4e31a742541652160541af5539d6978f

Your row should be the same in with as the previous one.

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

Best Regards

[Author]

Posts