WooCommerce Product Category for Custom Post Types - CSS

If you're using WooCommerce with custom post types, you might run into an issue where the product category archive pages don't display correctly. This can be fixed with some CSS.

Steps to Apply Product Category to Custom Post Types

1. Register the custom post type in functions.php:

   function create_custom_post_type() {
       $args = array(
           'public' => true,
           'label' => 'Custom Post Type',
           'supports' => array( 'title', 'editor', 'thumbnail' ),
           'taxonomies' => array( 'product_cat' )
       );
       register_post_type( 'custom_post_type', $args );
   }
   add_action( 'init', 'create_custom_post_type' );
   

2. Add the product category taxonomy to the custom post type by adding it in the taxonomies array when registering the custom post type. In this example, the taxonomy is product_cat.

3. Add some CSS to fix the styling issues. This will ensure that the product category archive pages display correctly for the custom post type. Here's a sample CSS code:

   /* adjust the archive page layout */
   .custom_post_type .woocommerce-breadcrumb {
       margin-bottom: 20px;
   }
   
   /* remove the sidebar */
   .custom_post_type .woocommerce-page #secondary {
       display: none;
   }
   
   /* adjust the main content width */
   .custom_post_type .woocommerce-page #primary {
       width: 100%;
   }
   

That's it! Now the product category archives should display correctly for your custom post type.

Conclusion

In this article, we discussed how to apply WooCommerce product category to custom post types using CSS. By registering the custom post type and adding the product category taxonomy to it, you can ensure that the archive pages display correctly. By applying a few CSS styles, you can adjust the layout and width of the archive page to match the rest of your website.