Recent Products and feature image

[Mang]

Hi,

I have created this home page using Pro and Pro header.

Summary

1. On the Revolution Slider, how can I add a preview/thumbnail of the video?
2. On Section 6, I want to be able to click on each image and link it to a URL.
3. On Section 9, column 1 - I have added the code on the Text to display recent products. I want to display only three products per row. How can I do that without leaving a space at the end?
4. On Section 9, column 2 - How can I link this section to a featured product or any product on the website.

Thank you for your great support, always.

[friech]

Hi @Mang,

Thank you for writing in, 1) Unfortunately, Revolution Slider has no video-thumbnail-preview feature.

2.) Image element has a Link option, you can enable that add paste your URL on the URL field.

3.) Is that a shortcode? Something like this?

[products limit="4" columns="4"]

If so, you can adjust that columns property value.

4.) It seems you already able to link this section?

Cheers!

[Mang]

Thank you friech.

You might have to login to know how these sections are built.

2. The images in this section are part of a grid. There is no link option.

3. Yes it a shortcode -
   [recent_products per_page=“8” columns=“4” orderby=“date” order=“desc”]

   When I reduce the column to 3, it leaves space after the images. Please see attached.

4. I was able to link this section to a product by adding this javascript
   jQuery(".singleprod").wrap("<a href='https://dev.mangtum.com/shop/fine-art/art/without-weight-and-dimension/'></a>");
   But I want the featured image of the product to show on this section. How do I do that?
   Also if I have to link this section to a featured product, how do I do that?

How can I add a secure note on this converstion?

Thanks

[ruenel]

Hello @Mang,

Thanks for updating in!

2.) Regretfully you cannot insert a link in a cell. There is no option for a link in the cell element settings. You will have to insert an image element before you can have a link.

3.) Please remove this custom CSS from your child theme’s style.css file:

.woocommerce li.product {
    margin: 0 2% 4.5% 0 !important;
}

And it looks like you are using a cached version of the old versions of the styling. You need to clear the plugin caches and regenerate the minified JS/CSS files since you have install Autoptimize plugin.

4.) Your custom JS code breaks the column structure which will lead to another issue. If you want to add a link, it is best that you insert an image element, display the product featured image and not use the featured image as a column background. With the image element, you can insert a link in the image element settings.

Hope this helps.

[Mang]

Thank you Ruenel.

Just curious - how did you figure out I am using cached version of the old versions of the styling.
How can I add a secure note on the conversation?

Thanks

[ruenel]

Hello @Mang,

When I viewed the source code of your site, I noticed that there is a script generated from Autoptimize. That is how I figured out the cached version.
​
You already have added a secure note in your first reply. To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[Mang]

Hi Ruenel,

For No 3, I remove the CSS but it did not resolve the issue.
For No 4, I added a new Section (section 10) and an image element to the section, to test the image element. Some how I am not able to add feature image to the image element. Not sure if I am doing it the right way. I have tried several times.

Thanks

Thanks

[friech]

Hi @Mang,

3.) That seems to be a bug with the recent product shortcode, to resolve that please add this to your Page > CSS

.woocommerce .cols-3 li.product, .woocommerce.columns-3 li.product {
    width: 30.666666%;
}

4.) Please inspect the image element and see the Source field, that is where you can insert or upload image.

Image element

Thanks,

[Mang]

Thank you friech.

When I try to link the image to the featured image, I am getting an error. Basically I am not able to get any of the dynamic functionality to work.

[tristup]

Hi @Mang,

You need to specify the post/product ID to add the featured image or link to the specific element using dynamic content.
Here I tried to show you an example how you can add that, please find the videos below.

To add the featured image:
https://www.awesomescreenshot.com/video/565389?key=5790d6c60af82626f54a693b85e0814b

To add the link:
https://www.awesomescreenshot.com/video/565412?key=b6ab5ebdee8a19ae321b38cf03ca9c21

Hope it helps.

Thanks