How to add shortcodes in X Pro editor

[zoepayne42]

Hi, I cant work out how to add a shortcode in the X pro page editor?

I want to add a woocommerce shortcode. Been trying to insert it by putting the shortcode in a text element but this doesnt work.

This is the shortcode I am trying to add:
[products ids=”1, 2, 3, 4, 5″]

please can you advise

Thanks

[nabeel]

Hi Zoe,

Thank you for reaching out to us, To add shortcodes in content builder, please add a Classic Raw Content element and paste the following code inside:

[products ids="1, 2, 3, 4, 5"]

The shortcode you pasted here has pretty quotes, this could be a reason why it wasn’t working in the Text element. Let us know how this goes!

[zoepayne42]

Great that worked thanks.

The next challenge I have is that I have inserted to the following shortcode:

[products columns=“2” orderby=“popularity” tag=“intro grid” ]

Here is a test page showing what it looks like

https://www.sandandseagulls.co.uk/test-page

This works fine on desktop and shows 2 columns as per the 'columns=“2” ’ attribute. However, when viewing on a mobile device it shows a single column. How do I force it to show 2 columns on a mobile device?

Thanks

[jade]

Hello Zeo,

The page that you have referenced goes to a 404 page.

But kindly try this code in X > Theme Options > CSS:

@media (max-width: 480px) {

    .woocommerce .cols-2 li.product, 
    .woocommerce.columns-2 li.product {
        width: 48% !important;
    }
    
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.