Gutenberg layout

DC-Team · January 13, 2019, 1:08am

In Gutenberg layout we can set up 6 columns, but in the published page it still displays only 4 columns

ruenel · January 13, 2019, 1:46am

Thanks for posting in!

The live view of the Gutenberg created page should display 6 columns also. I have tested it already in our local testing server. We do not get 4 but 6 columns as what you have design in Gutenberg. Would you mind sending us the url of the page in questioned?

Regards.

DC-Team · January 13, 2019, 6:57pm

Thanks - We just switched to 2019 and there is no issue …
Please see the access info for our Dev site in the secure note attached

ruenel · January 13, 2019, 9:20pm

Hello @DC-Team,

It turns out that you are referring to the Woocommerce product column block.
To resolve this, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce.columns-1 li.product {
    width: 100%;
}

.woocommerce.columns-2 li.product {
    width: 48%;
}

.woocommerce.columns-3 li.product {
    width: 30.666%;
}

.woocommerce.columns-4 li.product {
    width: 22%;
}

.woocommerce.columns-5 li.product {
    width: 16.8%;
}

.woocommerce.columns-6 li.product {
    width: 13.333%;
}

We would loved to know if this has work for you. Thank you.

DC-Team · January 14, 2019, 12:06am

Thanks for the quick response, but…

This solution is not responsive
This issue should be treated as a bug to be fixed in the theme (working fine in 2019) = it’s essential that what we see in Gutenberg page preview is the real preview of the page. Especially when we are trying to build a site that will load quickly by minimizing our CSS

ruenel · January 14, 2019, 1:55am

Hello @DC-Team,

To make the code responsive, please update it and use this:

.woocommerce.columns-1 li.product {
    width: 100%;
}

.woocommerce.columns-2 li.product {
    width: 48%;
}

.woocommerce.columns-3 li.product {
    width: 30.666%;
}

.woocommerce.columns-4 li.product {
    width: 22%;
}

.woocommerce.columns-5 li.product {
    width: 16.8%;
}

.woocommerce.columns-6 li.product {
    width: 13.333%;
}
 
@media(max-width: 767px){
  .woocommerce.columns-1 li.product,
  .woocommerce.columns-2 li.product,
  .woocommerce.columns-3 li.product,
  .woocommerce.columns-4 li.product,
  .woocommerce.columns-5 li.product,
  .woocommerce.columns-6 li.product {
    float: none;
    width: 100%;
  }
}

It turns out that you are using WooCommerce Blocks plugin. Please understand that this is the first we have encounter this plugin and at the moment, we do not support it. We will be informing our developers about this plugin.

Regards.

DC-Team · January 14, 2019, 8:00pm

Please have a look - your responsive CSS doesn’t work properly…
Again we think this Gutenberg issue should fixed in the theme as a bug by your developers = it’s essential that what we see in Gutenberg page preview is the real preview of the page

friech · January 15, 2019, 2:00am

Hi @DC-Team,

I can’t view the URL you provided above, is that only available to a specific country? Please check.

Thanks,

DC-Team · January 15, 2019, 2:20am

Hi Friech,
You’ll need to login as admin - the site is blocked to the world and google as it’s still in dev mode (Please keep it blocked)
Thanks

friech · January 15, 2019, 2:26am

Hi,

Yes, but I can’t even access the login page /wp-admin (see screenshot)

DC-Team · January 15, 2019, 11:21am

I really don’t know why - the site up and your team accessed the site before… Can you please try again and if you still can’t access it as Admin please send your IP so we could check if it’s blocked?

christian · January 15, 2019, 4:35pm

Looks like you’ve now disabled the IP restriction so I have successfully logged in.

Regarding the issue, this is not a bug. WooCommerce styles are disabled in our themes in favor of the lighter and specially designed X WooCommerce styles. This is the reason why using the WC columns won’t work outside of WC pages like the default Page post type.

If you’re concerned with performance, the CSS included in WooCommerce is around 85kb vs our theme’s WooCommerce CSS which is just 35kb. If you minify and add the code provided by Ruenel, it’ll total 39kb. With that said, It’ll actually be lighter even if you add the provided code.

The code provided by Ruenel is responsive. Maybe what you mean by not responsive is it doesn’t replicate what you see in 2019 where in phone view, you get 2 columns. In the provided code, it’s only 1 column.

Before I give you the updated code, please remove the code provided previously from the Global CSS because this should not be added globally as it can conflict with our theme’s WC CSS.

Instead, since you’re not using Cornerstone, install a plugin that can add CSS per page like WP Add Custom CSS. Then, copy the code below to the CSS box.

Below is the updated code for the 2 column phone layout. I’ve taken the actual code from WooCommerce Small Screen CSS.

.woocommerce.columns-1 .product {
    width: 100%;
}

.woocommerce.columns-2 .product {
    width: 48%;
}

.woocommerce.columns-3 .product {
    width: 30.666%;
}

.woocommerce.columns-4 .product {
    width: 22%;
}

.woocommerce.columns-5 .product {
    width: 16.8%;
}

.woocommerce.columns-6 .product {
    width: 13.333%;
}

@media (max-width: 767px) {
    .woocommerce .products .product {
        width: 48%;
        float: left;
        margin: 0;
        clear: both;
    }
    .woocommerce .products .product:nth-child(2n) {
        float: right;
        clear: none!important;
    }
}

Below is the minified code if you want a lighter version.

.woocommerce.columns-1 .product{width:100%}.woocommerce.columns-2 .product{width:48%}.woocommerce.columns-3 .product{width:30.666%}.woocommerce.columns-4 .product{width:22%}.woocommerce.columns-5 .product{width:16.8%}.woocommerce.columns-6 .product{width:13.333%}@media (max-width:767px){.woocommerce .products .product{width:48%;float:left;margin:0;clear:both}.woocommerce .products .product:nth-child(2n){float:right;clear:none!important}}

I tested that and below are the screenshots from my test site.

Please note that the code provided here will not be supported because this is not an official part of our themes. This should be treated as a guide and if this causes issues in now or in the future, you should remove this and consult with a third party developer for an updated WooCommerce code.

Hope that helps.

DC-Team · January 15, 2019, 5:21pm

Thanks Christian,
To clarify - when I mentioned that it should be treated as a bug that should be fixed, I was referring to the fact that Layout changes done and displayed in Gutenberg page preview don’t reflect the real layout of the page…

Prasant · January 15, 2019, 9:03pm

Hello @DC-Team,

Thanks for updating the thread.

I am unable to replicate the the problem on my end and in that regards it’s difficult for me to confirm if it’s a bug. I suggest you to please try testing for plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks.

DC-Team · January 18, 2019, 11:24am

Hi Prasant,
I am referring to changes done in Gutenberg layout Woocommerce product column block - set it as 5 and the Gutenberg preview will display 5 but in reality it will display only 4 on the page. Your team already replicated the problem and suggested CSS solutions - we still think it should be treated as a bug to be fixed without this CSS patch. As mentioned before this issue doesn’t exist in other themes tested (such as 2019)
Thanks

rad · January 18, 2019, 5:46pm

Hi @DC-Team,

I’ll add this a feature request, it’s intentional to limit the columns for Woocommerce even the shortcodes added to the visual composer, Gutenberg, or any builder. And the same reason it works on another theme.

And there is no way to predict where the shortcode will be used since it’s a global setup even on Woocommerce itself.

Thanks!

DC-Team · January 18, 2019, 7:29pm

Sorry Rad I don’t understand why the issue is still not clear:
Gutenberg layout changes done in X for Woocommerce product column block and seen in the page preview should display the reality. Meanwhile we have tested this issue on 3 other themes - and all works fine with no issues.

ruenel · January 19, 2019, 2:29am

Hello @DC-Team,

Sorry for the confusion. I have tested it myself and I can confirm to your that X and Pro theme do not support WooCommerce Block plugin yet at the moment. I am sure that this is the plugin involved in creating the product columns or product blocks.

I already made a request to our developers so that this plugin will be supported in the next release update. Meanwhile, the custom css we have provide is a temporary fix for you.

Please bear with us and thank your very much for your understanding.

DC-Team · January 19, 2019, 9:39am

Thank U - can you please check the eta with the developers?

thai · January 19, 2019, 3:31pm

Hi There,

There is no ETA yet, but you can take a look at this plugin:

Hope it helps