jonthi

Hi again,

That worked just perfect, many thanks!!

Case closed. 🙂

Have a nice sunday.

Best regards,

Thanks!! That worked like a charm I must say! 🙂

Left a review, it is impossible not to rank the plugin and support other than 5/5 of course.

Have a great weekend.

Many thanks! 🙂 Left a review, best support ever! 5/5

Many thanks for your reply! 🙂

I tried the custom CSS snippet, but unfortunately it does not work. 🙁

I am currently using this CSS code to achieve two columns for products and categories, for the archive pages in Woocommerce. The code will also achieve two columns for classic Woocommerce blocks, like shortcodes for “Product categories” on the homepage:

/* Two columns with products and categories on mobile - for Woo archive pages etc */

@media screen and (max-width:767px){
ul.products li.product {
    width: 47% !important;
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}
ul.products li.product:nth-child(2n+2){
    margin-right:0px !important;
}
}

The above code does not alter the new Product Collections block in any way, which is what I would like to have in two columns as well, for mobile devices. I tried your code:

/* Two columns for product collection block on mobile */

@media screen and (max-width: 767px) {
  .wc-block-grid.has-4-columns .wc-block-grid__products,
  .wc-block-grid.has-3-columns .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
  }

I cleared the cache and visited the page in private mode in the browser, no change unfortunately.

Is there any other way this can be accomplished for the product collection blocks? As of now, they display the products in a row, on mobile devices, filling the screen and allowing for much scrolling. 🙁

Many thanks in advance.

Best regards,

Hi,

Many thanks for your reply!

I have set a “standard page” as the homepage, and it is not working, which you also encountered.

It is, however, working for a new standard page I created, which is not set as the homepage, exactly as you described. 🙂

Do you know how this can be resolved?

Thanks again.

Best regards,

Hi,

Many thanks for your reply.

Unfortunately, the filter function does not appear at all in the frontend, when placing the block “above” the product collection block. 🙁

Here is how it looks like in the code, with the filter block above the product collection block (they are not nested now):

<!-- wp:woocommerce/product-filters -->
<div class="wp-block-woocommerce-product-filters wc-block-product-filters" style="--wc-product-filters-text-color:#111;--wc-product-filters-background-color:#fff"><!-- wp:woocommerce/product-filter-attribute {"displayStyle":"woocommerce/product-filter-chips"} -->
<div class="wp-block-woocommerce-product-filter-attribute"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"0.625rem","top":"0"}}}} -->
<h3 class="wp-block-heading" style="margin-top:0;margin-bottom:0.625rem">LENGTH</h3>
<!-- /wp:heading -->

<!-- wp:woocommerce/product-filter-chips -->
<div class="wp-block-woocommerce-product-filter-chips wc-block-product-filter-chips"></div>
<!-- /wp:woocommerce/product-filter-chips --></div>
<!-- /wp:woocommerce/product-filter-attribute --></div>
<!-- /wp:woocommerce/product-filters -->

<!-- wp:woocommerce/product-collection {"queryId":4,"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"featured":false,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[],"filterable":true,"relatedBy":{"categories":true,"tags":true}},"tagName":"div","displayLayout":{"type":"flex","columns":3,"shrinkColumns":true},"dimensions":{"widthType":"fill"},"queryContextIncludes":["collection"],"__privatePreviewState":{"isPreview":false,"previewMessage":"Faktiska produkter kommer att variera beroende på vilken sida som visas."}} -->
<div class="wp-block-woocommerce-product-collection"><!-- wp:woocommerce/product-template -->
<!-- wp:woocommerce/product-image {"showSaleBadge":false,"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} -->
<!-- wp:woocommerce/product-sale-badge {"align":"right"} /-->
<!-- /wp:woocommerce/product-image -->

<!-- wp:post-title {"textAlign":"center","isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}},"typography":{"lineHeight":"1.4"}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-collection/product-title"} /-->

<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small"} /-->

<!-- wp:woocommerce/product-button {"textAlign":"center","isDescendentOfQueryLoop":true,"fontSize":"small"} /-->
<!-- /wp:woocommerce/product-template -->

<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->

<!-- wp:woocommerce/product-collection-no-results -->
<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","flexWrap":"wrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size"><strong>Inga resultat hittades</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Du kan prova <a class="wc-link-clear-any-filters" href="#">rensa alla filter</a> eller gå till vår <a class="wc-link-stores-home" href="#">butikens hem</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- /wp:woocommerce/product-collection-no-results --></div>
<!-- /wp:woocommerce/product-collection -->

Some of the hooks are:

woocommerce_cancel_unpaid_orders

wc_admin_daily_wrapper

woocommerce_cleanup_personal_data

woocommerce_scheduled_sales

etc…

Many thanks.

Best regards,