For example, in the screenshot below you can see two separate custom fields groups that are applied to the same post object:

When viewing the edit screen for this post, the main Content Editor would still appear even though you’ve marked it as hidden in the field group on the right. The reason for this is because the field group on the left has a lower Order No. and takes precedance over the group on the right.

Another option that exists for integrating the Primary Category in to the WooCommerce breadcrumbs is to simply override the main term that WooCommerce uses to generate the crumbs. The code below demonstrates how to do this using the `woocommerce_breadcrumb_main_term` filter. This code can be added to your theme’s functions.php file or in a plugin file:

Because I knew the underlying data was fine, it was just being duplicated, I decided to use a MySQL query to update the database directly rather than running another import. Here is the query I ended up with:

UPDATE wp_postmeta a
JOIN wp_postmeta b
ON a.post_id = b.post_id
SET b.meta_value = REPLACE(b.meta_value, CONCAT(a.meta_value, ','), '')
WHERE a.meta_key = '_thumbnail_id' AND b.meta_key = '_product_image_gallery';


Because of the way that WordPress stores post meta I had to run a join on the wp_postmeta table against itself. Here is a break down of each line of the query:

UPDATE wp_postmeta a
JOIN wp_postmeta b

Here I am selecting the wp_postmeta table and joining it to itself in order to grab the two separate meta data values. The a table is for the _thumbnail_id field and the b table is for the _product_image_gallery field.

ON a.post_id = b.post_id

Now we use the post_id column to join together the rows by the post that they are associated with.

SET b.meta_value = REPLACE(b.meta_value, CONCAT(a.meta_value, ','), '')

After selecting and joining the tables I am setting the meta_value of the b table to be the value of the meta_value column with the duplicate image ID removed. It was made simpler because of the fact that I knew that the first value in that _product_image_gallery meta value was the duplicate. This meant I only had to search at the beginning and not worry about whether or not it was followed by a comma.

One important note: the reason I’m specifically targeting the b.meta_value column is because the b table is the table within the join that is targeting the _product_image_gallery meta field. If I were to use the a table it would assign the updated value to the _image_id meta field.

WHERE a.meta_key = '_thumbnail_id' AND b.meta_key = '_product_image_gallery';

Finally I am establishing which meta fields that I’m looking to target with the query.

By using this MySQL approach to fixing the meta data I was able to fix the meta fields with a single command that took roughly 3 seconds to process rather than running another full product import.

This turned out to be a fairly straight-forward task. By using the WooCommerce function wc_get_attribute_taxonomy_names() we can create a set of location rules that are dynamically created which will target all existing global attribute types.

Here is the complete code which will add a tab and sample image field to all global attribute Term Edit pages:

The filter that is used for this example is ‘wysiwyg_tinymce_settings‘. This filter makes it possible to edit the TinyMCE  settings immediately before the field is initialized. What I decided to do was to make use of the existing CSS wrapper field in the ACF admin:

Then, using the previously mentioned filter, I grab those values and apply them to the WYSIWYG editor’s iframe body tag:

Now, if I specify the correct class names within my ‘editor-styles.css’ file, the editor will get the custom styling I’ve set.

Now I can easily style all the ACF WYSIWYG fields in my admin so that they exactly reflect how the content will look on the front end.

The full code is available on Github.

First, create the content fields within ACF. I used just a basic repeater that contains a text field for the tab title and a WYSIWYG field for the tab content. For the example code, the repeater was named “tabs” and it’s sub fields are named “tab_title” and “tab_content”.

Next, I just had to tie these tabs in to the existing WooCommerce filter “woocommerce_product_tabs” (more details) which allows you to modify the existing tabs for each product on it’s detail page. I grabbed the assigned tabs from the ‘tabs’ ACF field. Stepping through these tabs I added them to the incoming ‘$tabs’ variable within the filter.  The required properties for each tab are:

• title – The title of the tab
• priority – The order in which the tab should appear among the other tabs
• callback – The name of the function to call to get the content of the tab

You’ll notice in my code I’m adding a fourth property “tabContent”. This is a custom property used by my content generating function to get the WYSIWYG content to display within the tab.
And that’s all there is to it. Of course there are plenty of areas to improve this small bit of code. For example, I plan on adding in a “Global Tabs” area that would let the client specify global tabs that should appear under all products or even products just within specific Categories. Additionally, I also will be adding a field to control the value of the ‘priority’ property rather than auto-generating.

The full code including the ACF Repeater declaration can be viewed on GitHub.

ERROR #83893a: unable to decode JSON restore data ``. Restore halted.

Here are a couple steps you can follow to diagnose the issue:

1. Verify the source of the issue – Look in your browser’s debug console and check for something like “Uncaught TypeError: undefined is not a function”. Jump to the source of the error.  In my case it was the “.on()” function not being declared.  This is a dead giveaway that something wonky is going on with the loaded version of jQuery.
2. Check the loaded version of jQuery – Run this code in your debug console to verify the current version:

   jQuery.fn.jquery

   If that returns anything below 1.11.x you are viewing an old version of the jQuery library.  You can double check this by browsing directly to the included jquery.js file.  The URL should be something like: http://YOURSITEURL/importbuddy/js/jquery.js

3. Check the loaded version of jQueryUI Tooltip – This was another script that was loading improperly for me as well.  Browse directly to the tooltip.js file by using a URL like: http://YOURSITEURL/importbuddy/js/tooltip.js

What appears to be causing these issues is the hosting provider has a cached version of those specific files and is serving that rather than the actual files on your server.

One possible workaround is to start the ImportBuddy process and clear the site’s cache after the /importbuddy/ directory has been created during the first step of the import process but before it has restored any files.  This can be tricky since ImportBuddy will put your site in to maintenance mode once it starts so you’ll have to delete the “.maintenance” file if your hosting provider requires you to be logged in to WordPress in order to clear the cache (this is the case with GoDaddy Managed WordPress hosting).  After you’ve cleared the cache, restart the import process and verify that the correct files are now showing up.

If clearing the cache does not fix it there’s a more heavy-handed fix that will work but requires editing the ImportBuddy code:

1. Change the plugin version – Changing the plugin version to a much higher number will also cause the server to not use the cached version.  You can do this by opening the ‘/importbuddy/init.php’ file on your destination server and set the version declaration to something like 55555.  Once you’ve done this, restart the ImportBuddy process and verify that the scripts are loading correctly.

After version 3 of Bootstrap this method no longer works as Bootstrap started using more descendant selectors that do not translate properly when just wrapped in a container.  Fortunately, the workaround is fairly simple.  First, with this method we need to use the output CSS from Bootstrap rather than the LESS files.  Then, when importing it we pass the (less) option to force our LESS file to process the imported CSS as though it were also LESS.  This generates the correct class names to constrain your Bootstrap styles to a designated element without affecting the rest of the page.