Creating Woocommerce Archive page with ACF

Support
#1

Hi,

We want to create archive page for Woocommerce with ACF. We have fields as “Gift Set”, Best Seller, “Product New” etc. So, we want to have pages that list those products with the particular ACF fields. For example “Product New” page list new products. “Gift Set” list the products with the “Gift Set” fields and so on.

We tried with the below page as mentioned:
https://theme.co/forum/t/solved-acf-of-product-single-in-woocommerce-shop-layout-wc-archive/97171

But this did not helped as no products were listed in the New Product page that we have created as archive page for the New products. We have few products that contains the New Product ACF Field.

Hoping for the solutions.

Thank You,
Bibhash Karn

#2

Hello Bibhash,

Thanks for writing in! If you have added ACF fields to your products to indicate as “Gift Set”, Best Seller, “Product New” etc, you can create separate normal page and then edit that page in the builder. You can use Looper Provide Query String to get those product items containing those ACF fields.

If you already did created something and nothing is displaying, please provide us access to your site so we can check your page structure and how you have implemented those fields in the products. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.

#3

Hi,

Thank you for your response.

We have already created a new page as mentioned above. For instance below is the link for newly created page for “Gift Set”. We have also used Looper Provide Query String as suggested though unable to achieve as required.

https://www.hamroshringar.com/gift-set/

Please check secure note for the details. So, hoping for the suggestion in this matter.

Thank You,
Bibhash Karn

WooCommerce Archive Filter by Specific ACF Pro Field
#4

Hello Bibhash,

In order to list the product based on the meta field I would suggest you please insert this query string.

post_type=product&posts_per_page=3&post_status=publish&ignore_sticky_posts=1&meta_key=products_gift_set&meta_value={{dc:acf:post_field field="products_gift_set"}}&meta_compare=%3D&order=DESC

Please feel free to change the meta key and value dynamic content code as per your need.

Hope it helps
Thanks

#5

Hi,

Thank you for your response.

Thank you for the link and provided query string. We used above provided query string but sorry to say it doesn’t provided us the products with the “Gift Set”. Instead it listed all recent products.

Please let us know how we can resolve this.

Thank you and best regards.

#6

Hello Bibhash,

Your WP Query should be as simple as this:

$args = array(
  'post_type' => 'product',
  'posts_per_page' => 3,
  'post_status' => 'publish',
  'ignore_sticky_posts' => 1,
  'meta_key'     => 'products_gift_set',
  'meta_value'   => 'Gift Set',
  'meta_compare' => '='
);

 var_dump( http_build_query( $args ) );

which will give your the following query string:
post_type=product&posts_per_page=3&post_status=publish&ignore_sticky_posts=1&meta_key=products_gift_set&meta_value=Gift+Set&meta_compare=%3D&order=DESC

Screen Shot 2022-10-28 at 8.17.21 AM
Screen Shot 2022-10-28 at 8.17.21 AM1886×1154 419 KB

For the rest of the query string, it should be like this:

Product Badge: New
post_type=product&posts_per_page=3&post_status=publish&ignore_sticky_posts=1&meta_key=product_new&meta_value=New&meta_compare=%3D&order=DESC

Product Badge: Best Seller
post_type=product&posts_per_page=3&post_status=publish&ignore_sticky_posts=1&meta_key=products_best_seller&meta_value=Best+Seller&meta_compare=%3D

Kindly let us know how it goes.

#7

Hi,

Thank you for your reply and above provided query string. Great, above queries helped us to achieve the list of products that we thought of. Thank you once again.

One, more thing. We have ACF fields with checkbox (named: products_skin_type). Now we want to have individual pages with the checkbox’s options. Below are some of the options:

acne_prone_skin : Acne-Prone Skin
all_skin_types : All Skin Types
bumpy_skin : Bumpy Skin
combination_skin : Combination Skin
congested_skin : Congested Skin
etc...

Now we want to have individual pages for each options that lists products with that options. Can you please guide us to achieve this.

Thank You.

#8

Hello Bibhash,

You need to change the meta key and meta value in your query then you need to convert the query string as shown by my colleagues @ruenel after that you can use that query string in the Looper query.

For example:

post_type=product&posts_per_page=3&post_status=publish&ignore_sticky_posts=1&meta_key=all_skin_types&meta_value=All+Skin+Types&meta_compare=%3D

Hope it helps
Thanks

#9

Hi,

Thank you for your reply.

We have already tried as you mentioned (also retired as per your above provided example query string) but this doesn’t listed (no products listed) the products as expected. You can view at the below link:

https://www.hamroshringar.com/products-skin-type/all-skin-types/

Hoping for the solutions.

Thank You.

#10

Hello Bibhash,

I have checked your Product Skin Type custom meta and it will return an array. Because of that, the previous solution will no longer work. You will need to have like this WP Query:

$meta_query[] = array(
    'key'     => 'products_skin_type',
    'value'   => 'All+Skin+Types',
    'compare' => 'IN',
);

$query = array(
    'post_type'  => 'product',
    'posts_per_page' => 3,
    'post_status' => 'publish',
    'ignore_sticky_posts' => 1,
    'meta_key'   => 'products_skin_type',
    'orderby'    => 'meta_value',
    'order'      => 'ASC',
    'meta_query' => $meta_query
);

Add the query above in your child theme’s functions.php and then use var_dump( http_build_query( $query ) ); to get the resulting query string.

Kindly let us know how it goes.

#11

Hi,

Thank you for your response.

Thank you for your above WP Query. The var_dump( http_build_query( $query ) ); provided us below query string:

string(261) "post_type=product&posts_per_page=3&post_status=publish&ignore_sticky_posts=1&meta_key=products_skin_type&orderby=meta_value&order=ASC&meta_query%5B0%5D%5Bkey%5D=products_skin_type&meta_query%5B0%5D%5Bvalue%5D=All%2BSkin%2BTypes&meta_query%5B0%5D%5Bcompare%5D=IN"

So we used below query string at the lopper:

post_type=product&posts_per_page=3&post_status=publish&ignore_sticky_posts=1&meta_key=products_skin_type&orderby=meta_value&order=ASC&meta_query%5B0%5D%5Bkey%5D=products_skin_type&meta_query%5B0%5D%5Bvalue%5D=All%2BSkin%2BTypes&meta_query%5B0%5D%5Bcompare%5D=IN

Event tough of this, the list of products did not appeared in the page. So please let us know further to achieve lists of product as expected.

We have implemented above query string at below page as example:
https://www.hamroshringar.com/products-skin-type/all-skin-types/

Thank You.

#12

Hello Bibhash,

The return of your ACF custom field needs to be changed:

Screenshot 2022-10-30 at 1.28.52 PM
Screenshot 2022-10-30 at 1.28.52 PM1750×1972 142 KB

And then you can use this query string:
post_type=product&posts_per_page=3&post_status=publish&ignore_sticky_posts=1&meta_key=products_skin_type&orderby=meta_value&order=ASC&meta_query%5B0%5D%5Bkey%5D=products_skin_type&meta_query%5B0%5D%5Bvalue%5D=all_skin_types&meta_query%5B0%5D%5Bcompare%5D=LIKE

$meta_query[] = array(
    'key'     => 'products_skin_type',
    'value'   => 'all_skin_types',
    'compare' => 'LIKE',
);

$query = array(
    'post_type'  => 'product',
    'posts_per_page' => 3,
    'post_status' => 'publish',
    'ignore_sticky_posts' => 1,
    'meta_key'   => 'products_skin_type',
    'orderby'    => 'meta_value',
    'order'      => 'ASC',
    'meta_query' => $meta_query
);

The comparison used is LIKE as advised from this documentation:

Best Regards.

#13

Hi,

Thank You. Thanks a lot. Great, It is something that we are expecting.

Thank you for ACF screenshot and ACF’s documentation link. Thank you for the new query string. This helped us to achieve as our expectation.

Also, is it possible to get “Post Pagination” in the page for the list of products. We want to have pagination after 36 products in the page. We have used “Post Pagination” in the Layout Builder but confused how to get Pagination after 36 posts as in the above query we have used posts_per_page=36

Hoping for the solutions.

Thank You

#14

Hello Bibhash,

Thanks for writing in! Regretfully the Post Pagination will only work in archive pages such as the blog index, category archive pages, tag archive pages, etc. Since you are using post meta, there is no archive for it. What you have right now is just a normal pages that displays the group of post items that has specific post meta like the “All Skin Types” or “Gift Set” meta.

You can only have Post Pagination in the following example Tag archives:

Best Regards.

#15

Hi,

Thank you for your response. Sorry to know “Post Pagination” will not work with post meta like the “All Skin Types” or “Gift Set” meta.

Maintaining Skin Types with Tags and Categories Archive has been ambiguous for us and also we want link for the Skin Types (with focus - not as tags and categories) with pages so that user can navigate through it.

Anyway, Thanks a lot for the above solutions. We will look around the Pages, Pagination and how can we deal with it for user navigation.

Also one thing, we have custom layout for search results page built with Layout Builder and in it Pagination is working fine. So any suggestion on this to get Pagination on these pages that has specific post meta like the “All Skin Types” or “Gift Set” meta too.

Thank You

#16

Hi Bibhash,

The Search Result is set with an Archive layout and as my colleague says the pagination will work on that. The post meta is not the Archive page, and that is why the pagination will not work in it.

Thanks

#17

Hi,

Thank you for your reply. Oh! Thank you for your kind information.

Is there any way to make Archive layout with these post meta? As this is going to very import features for our ecommerce we are looking for the solutions in this matter.

Hoping for the solutions.

Thank You

#18

Hi Bibhash,

Unfortunately, that is not possible. If you still want it, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called Elite service, where we offer complex customization

Thanks

#19

Hi,

Thank you for your reply. Sorry to know that it is not possible.

While going through pro customization at Layout Builder, we see WC Archive, WC Single, Single and Archive to Create Layout. Is there any way via this method to achieve list of products from above mentioned post meta. May be something as shown like Page Specific, Front Page etc. in the dropdown of list with post meta.

Hoping for the suggestion in this matter.

Thank you and best regards.

#20

Hello Bibhash,

Thanks for updating in! Yes, we do have WC Archive , WC Single , Single and Archive in the Layout Builder. These layouts still follows WordPress standards and uses the WordPress Loop. For WC Archive and Archive layouts, you do not need to have a Looper Provider. Just add a Looper Consumer and let the default WordPress loop do the rest so that the pagination will work. The same goes if you are using the default WordPress theme or any WordPress theme. All of the archive (including product archives) has a pagination all because the items generated by the WordPress loop will be dynamically displayed in chronological order.

On the other hand, in our Single and WC Single layout, these layouts are for single page and/or single custom post type such as a product item. Having to display a number of items in these layouts will need to have a Looper Provider and a Looper Consumer to display the items. You are also limited to a number of items that you can display in a single layout. And this is why the pagination will not work. If you need to display several items in a paginated way, we can only recommend that you use Essential Grid plugin or other 3rd party that uses AJAX in loading the post/product items. You can then insert the Classic Essential Grid element into your WC Single or Single layout.

Hope this makes sense.