Short Codes not displaying full width in 2021 theme

  • Resolved annabealizabeth

    (@annabealizabeth)


    3 years, 8 months ago

    Hi, I have run into an issue and I’m trying to figure out the cause.

    I’m working with:
    Child theme of WordPress Twenty-Twenty One
    Woo Commerce Blocks and short codes
    Advanced Woo Labels Plugin

    So here’s my issue, Advanced Woo Labels do not show up in WooCommerce Blocks yet (developer is working on it). In the meantime developer suggested using shortcodes to display the products. Which works great! Except, when I insert my desired short code on the home page:

    [products limit=”12″ columns=”4″ orderby=”popularity” ]

    no number of alterations with and display settings, width, wide-width, full-width will display the shortcode block correctly.

    However, when I made a new test page, it displayed full-width automatically, no issues.

    The Woo Commerce blocks and all the other blocks on the home page also display full-width but the short code will not. Even putting it in a full width column doesn’t work. Any suggestions?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support EastOfWest a11n

    (@eastofwest)

    Hi there,

    With only WooCommerce and the TwentyTwentyOne theme active, and a copy-pasted sample from the shortcode example page, here is the result I got:

    Product shortcode in TwentyTwentyOne with a full-width template applied to the page

    The page template on that page was set to full-width though. Oddly, when I copy-pasted your shortcode from above, I got this result instead:

    Shortcode from the forum post

    I’m not sure if it’s just a result of pasting it in the forum here (I think it probably is), or whether this will solve your overall issue, but it seems your values are inside slanted-quotes ( ” ). When I change them to regular quotes ( " ), I get the same result.

    Could you try those regular quotes and set your page template to full-width, and let us know the result?

    Thread Starter annabealizabeth

    (@annabealizabeth)

    So, does Twenty twenty-one have a general page template setting? I can’t seem to find one in the editor. I’ve just been adjusting col width in the block editor.

    On the test page I made, I put the short code in a full width column and that did the trick, but it’s not working for the home page for some reason.

    This a screen shot of the home page and what it looks like in the block editor.

    Front end

    Block Editor

    I also tried the quotes thing but did not change the results. To me it’s acting like a page template issue, but there are other full-width items on the page, so I don’t get why this one doesn’t want to go full width.

    Thread Starter annabealizabeth

    (@annabealizabeth)

    BTW, I also tried saving that working block from the test page I made as a reusable block and adding it on the home page. It didn’t solve the issue.

    Plugin Support EastOfWest a11n

    (@eastofwest)

    Hi again,

    I had a closer look at this, and notice the issue you describe is specific to the homepage. It’s a theme-specific issue, not WooCommerce per se, so the place to continue looking for help would be the Twenty Twenty-One theme support forum.

    However, while checking what the issue is, this CSS worked so far as forcing the shortcode to full width – I didn’t test it widely, so I can’t guarantee it’s a perfect solution, but might get you going in the right direction:

    
.home #main [class*="woocommerce columns-"] {
	max-width: inherit;
}

    Also, I found this thread on the forum above that seems to address the issue you’re experiencing. Have a look at the plugin link, it seems to add the option to control your site’s Max Width, which is what’s causing the issue.

    In the light of the more theme-specific support forum linked above where you can find relevant help, I’ll mark this thread as resolved.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Short Codes not displaying full width in 2021 theme’ is closed to new replies.