[Closed] Adding custom fields to Woocommerce archive page

[Author]

Posts

[janeyC]

Hi there,

I have created a group of custom fields for my products and have successfully added them to my custom single product template.

Now I am trying to build the template for the main shop page (product archive?) but when I insert a block and select dynamic content to access the custom fields they are not in the list - is there a step I am missing?

Many thanks

[Christian Cox]

Hello, one of the options in the dynamic sources for a single field block should be "Current Product" if this archive is assigned to the Product post type successfully, but I do not see that option appear in your screenshot. I suspect the WordPress Archive is not configured correctly, so please check these items first:
1. In the right sidebar of the block editor, click the WordPress Archive tab up at the top and toggle open the Loop Selection panel. Be sure that "Products" is checked in the Custom Post Archives section. If any other items are checked here, uncheck them for now. Save your update, then reload the page to reset the editor loop context. Try again - this time the Single Field block should give you an option for the Current Product as a dynamic source. After you select Current Product you can select the custom field group, then any individual field in that group, as you did previously in the Content Template. I bet this will fix the problem, but if not, continue the following troubleshooting steps.
2. The Single Field block may not be positioned inside the archive's Loop. I assume you want to display this block for each Product in the results, correct? I can't quite tell from the screenshot, but you can double check the placement of the Single Field block by opening the Block Navigation menu in the top toolbar. When open, you can see a hierarchical diagram of blocks in the WP Archive design. You should see the Single Field block nested below and inside the WordPress Archive Loop block (screenshot attached here). If that is not the case in your design, you must drag this block into the WP Archive Loop block so the Single Field block is repeated for each Product in the archive (shop page) results.
3. There is an unexpected JavaScript error preventing dynamic sources from working correctly. If you know how to open the browser console, please do so and copy any error messages you see. Paste those here in your next reply for me to review. If you're not familiar with the browser console, feel free to skip this step.

Let me know the results and we can go from there. Thanks!

[janeyC]

Hi Christian,

Many thanks for your reply 🙂

So steps 1 and 2 check out fine.

There is one error showing in the console as below:

DevTools failed to load source map: Could not load content for hidden link: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

J.

[Christian Cox]

There is one error showing in the console as below...DevTools failed to load source map
Okay thanks for the test, but this issue most likely unrelated. Let's try a few troubleshooting steps to narrow down the issue.
- The options for this Single Field Block could be cached, so a new block might be required. Delete the problematic Single Field Block from the editor and save the WordPress Archive. Reload the page to refresh the editor contexts, place a new Single Field Block in the editor and try selecting the field's dynamic source again. If it's still not working as expected, continue the following tests.
- Temporarily activate a default theme like Twenty Twenty One.
- Temporarily deactivate any custom code snippets in Toolset > Settings > Custom code tab.
- Temporarily deactivate all plugins except Types and Blocks (or Views if you use the legacy plugin). If you want to activate a Maintenance Mode plugin during testing that should be okay. Test again.
- If the problem is resolved, reactivate your theme, custom code snippets, and other plugins, one by one, testing each time you activate a new component, until the problem returns. Let me know the minimum combination of components in which you are able to reproduce the problem.
- In a new tab or window, edit the Product post that appears as the first result in the WP Archive editor's loop. Ensure that this post has some value in the custom field you are trying to use in dynamic sources. If it does not have a value, add a temporary value for testing purposes. Edit the WP Archive and repeat first troubleshooting step, where you recreated the Single Field block.

I'll stand by for your update.

[janeyC]

Hi Christian,

Thanks for your response and apologies for the delay in my reply.

So I accidentally figured out a temporary solution; I created a new group of custom fields and forgot to assign them to a post type and then found that they were showing in the drop-down list in the archive editor, so I did the same with the other field groups and was able to build my page and style it. This is however a temporary fix as the fields now show up all over the place - in all pages / posts etc... I needed to show progress to my client so left it as it was but now I need to find a permanent solution to the problem. I am worried about assigning the fields now to the products post types in case it breaks all the work I have done...

Where do we go from here?

J

[Christian Cox]

I am worried about assigning the fields now to the products post types in case it breaks all the work I have done...
Understandable, though ultimately there is no way to know for sure without testing it. Ideally you would migrate a clone of the live site into a development environment where we can reproduce and resolve the issue before you make potentially destructive adjustments in the live site. If no development environment is available, at least create a backup of the site's database so you can restore the database to its current state in case something goes wrong.

You can also try a few of the troubleshooting steps I mentioned earlier to eliminate any possible plugin or theme conflicts:
- Temporarily activate a default theme like Twenty Twenty One and temporarily deactivate any custom code snippets in Toolset > Settings > Custom code tab.
- Temporarily deactivate all plugins except Types, Blocks (or Views if you use the legacy plugin), and Toolset WooCommerce Blocks. If you want to activate a Maintenance Mode plugin during testing that should be okay. Test again.
- If the problem is resolved, reactivate your theme, custom code snippets, and other plugins, one by one, testing each time you activate a new component, until the problem returns. Let me know the minimum combination of components in which you are able to reproduce the problem.

A few other troubleshooting steps you can try:
- If your site uses some server-side caching mechanism like Litespeed, memcache, redis, object caching, etc. try purging those caches.
- You can try temporarily unassigning this WordPress Archive from the Products CPT and reassigning it after refreshing the editor page.
- You can try temporarily unassigning this WordPress Archive from the Products CPT and creating a new WP Archive for the Products CPT. Are you able to see "Current Product" in the dynamic sources options in the new WP Archive?

I'll stand by for your update. If necessary, I can create a site clone and install it on my local environment.