Below, you’ll find a detailed guide on how to add the Product Categories Designs for WooCommerce Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Product Categories Designs for WooCommerce Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Product Categories Designs for WooCommerce Plugin and the shortcodes it provides:
"Product Categories Designs for WooCommerce is a powerful WordPress plugin that enhances your e-commerce store by offering visually striking and customizable designs for your product categories."
- [wpos_product_categories]
- [wpos_product_categories_slider]
Product Categories Designs for WooCommerce [wpos_product_categories] Shortcode
The ‘wpos_product_categories’ shortcode from Product Categories Designs for WooCommerce plugin displays a product categories grid. It provides customization options like adjusting columns, hiding empty categories, and ordering.
Shortcode: [wpos_product_categories]
Parameters
Here is a list of all possible wpos_product_categories shortcode parameters and attributes:
ids– Specifies the IDs of the product categories to display.number– Sets the maximum number of product categories to show.columns– Defines the number of columns in the product categories grid.hide_empty– Determines whether to hide product categories without products.parent– Allows showing of child categories from a specific parent category.height– Defines the height of the product category images.orderby– Sets the criteria for ordering the product categories.order– Specifies the order direction (Ascending or Descending).design– Chooses the design template for displaying product categories.extra_class– Adds extra CSS classes to the product categories wrapper.className– Adds additional CSS classes to the product categories wrapper.align– Sets the alignment of the product categories grid.dev_param_1– A developer parameter for custom functionality.dev_param_2– Another developer parameter for custom functionality.
Examples and Usage
Basic example – The shortcode below will display a grid of product categories using the default parameters.
[wpos_product_categories /]Advanced examples
Displaying a grid of specific product categories by IDs, with a specific number of categories, and in a certain number of columns:
[wpos_product_categories ids="1,2,3" number="3" columns="3" /]Displaying a grid of product categories, excluding the empty ones, sorted by category name in ascending order, and using a different design:
[wpos_product_categories hide_empty="1" orderby="name" order="ASC" design="design-2" /]Displaying a grid of product categories, with a specific height for the grid items, and aligning the grid to the center of the page:
[wpos_product_categories height="500" align="center" /]PHP Function Code
In case you have difficulties debugging what causing issues with [wpos_product_categories] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wpos_product_categories', 'pcdfwoo_product_categories' );Shortcode PHP function:
function pcdfwoo_product_categories( $atts, $content = null ) {
// SiteOrigin Page Builder Gutenberg Block Tweak - Do not Display Preview
if( isset( $_POST['action'] ) && ( $_POST['action'] == 'so_panels_layout_block_preview' || $_POST['action'] == 'so_panels_builder_content_json' ) ) {
return '[wpos_product_categories]';
}
// Divi Frontend Builder - Do not Display Preview
if( function_exists( 'et_core_is_fb_enabled' ) && isset( $_POST['is_fb_preview'] ) && isset( $_POST['shortcode'] ) ) {
return '<div class="pcdfwoo-builder-shrt-prev">
<div class="pcdfwoo-builder-shrt-title"><span>'.esc_html__( 'Product Categories Grid - Shortcode', 'product-categories-designs-for-woocommerce' ).'</span></div>
wpos_product_categories
</div>';
}
// Fusion Builder Live Editor - Do not Display Preview
if( class_exists( 'FusionBuilder' ) && (( isset( $_GET['builder'] ) && $_GET['builder'] == 'true' ) || ( isset( $_POST['action'] ) && $_POST['action'] == 'get_shortcode_render' )) ) {
return '<div class="pcdfwoo-builder-shrt-prev">
<div class="pcdfwoo-builder-shrt-title"><span>'.esc_html__( 'Product Categories Grid - Shortcode', 'product-categories-designs-for-woocommerce' ).'</span></div>
wpos_product_categories
</div>';
}
$atts = extract( shortcode_atts(array(
'ids' => '',
'number' => 0,
'columns' => 3,
'hide_empty' => 1,
'parent' => '',
'height' => 300,
'orderby' => 'name',
'order' => 'ASC',
'design' => 'design-1',
'extra_class' => '',
'className' => '',
'align' => '',
'dev_param_1' => '',
'dev_param_2' => '',
), $atts, 'wpos_product_categories') );
$number = pcdfwoo_clean_number( $number, 0 );
$height = pcdfwoo_clean_number( $height, 300 );
$columns = pcdfwoo_clean_number( $columns, 3 );
$columns = ( $columns <= 12 ) ? $columns : 3;
$height_css = ! empty( $height ) ? "height:{$height}px;" : '';
$ids = ! empty( $ids ) ? explode( ',', $ids ) : array();
$design = ( $design == 'design-2' ) ? $design : 'design-1';
$order = ( strtolower( $order ) == 'asc' ) ? 'ASC' : 'DESC';
$orderby = ! empty( $orderby ) ? $orderby : 'name';
$hide_empty = ( $hide_empty == true || $hide_empty == 1 ) ? 1 : 0;
$parent = ( isset( $parent ) ) ? $parent : '';
$align = ! empty( $align ) ? 'align'.$align : '';
$extra_class = $extra_class .' '. $align .' '. $className;
$extra_class = pcdfwoo_sanitize_html_classes( $extra_class );
// Get terms
$args = array(
'number' => $number,
'orderby' => $orderby,
'order' => $order,
'hide_empty' => $hide_empty,
'include' => $ids,
'parent' => $parent,
'pad_counts' => true,
);
// Get Terms
$product_categories = get_terms( 'product_cat', $args );
ob_start();
if ( $product_categories ) { ?>
<div class="pcdfwoo-product-cat-wrp pcdfwoo_woocommerce <?php echo esc_attr( $design.' '.$extra_class ); ?>">
<div class="pcdfwoo-product-cat pcdfwoo-clearfix">
<?php foreach ( $product_categories as $category ) {
$cat_thumb_id = get_term_meta( $category->term_id, 'thumbnail_id', true );
$cat_thumb_url = wp_get_attachment_image_src( $cat_thumb_id, 'medium_large' );
$term_link = get_term_link( $category, 'product_cat' );
$cat_thumb_link = ! empty( $cat_thumb_url[0] ) ? $cat_thumb_url[0] : wc_placeholder_img_src();
?>
<div class="pcdfwoo-medium-<?php echo esc_attr( $columns ); ?> pcdfwoo-columns">
<div class="pcdfwoo-product-cat_inner" style="<?php echo esc_attr( $height_css ); ?>">
<a href="<?php echo esc_url( $term_link ); ?>">
<?php if( ! empty( $cat_thumb_link ) ) { ?>
<img src="<?php echo esc_url( $cat_thumb_link ); ?>" alt="<?php echo esc_attr( $category->name ); ?>" />
<?php } ?>
<div class="pcdfwoo_title"><?php echo wp_kses_post( $category->name ); ?> <span class="pcdfwoo_count"><?php echo esc_html( $category->count ); ?></span></div>
</a>
</div>
</div>
<?php } ?>
</div>
</div>
<?php }
$content .= ob_get_clean();
return $content;
}
Code file location:
product-categories-designs-for-woocommerce/product-categories-designs-for-woocommerce/includes/shortcode/pcdfwoo-shortcode.phpProduct Categories Designs for WooCommerce [wpos_product_categories_slider] Shortcode
The Product Categories Designs for WooCommerce shortcode displays a slider of product categories. It allows customization of display properties like order, design, autoplay, speed, and more.
Shortcode: [wpos_product_categories_slider]
Parameters
Here is a list of all possible wpos_product_categories_slider shortcode parameters and attributes:
orderby– Determines the sorting order of the product categories.order– Defines the direction of the sorting, either ascending or descending.design– Specifies the design template for the slider.ids– Array of product category IDs to display.loop– Whether the slider should loop or not.dots– Shows or hides navigation dots in the slider.arrows– Displays or hides navigation arrows in the slider.autoplay– Enables or disables autoplay feature in the slider.autoplay_interval– Sets the autoplay interval in milliseconds.speed– Adjusts the speed of the slider transition.height– Sets the height of the slider in pixels.number– Limits the number of product categories to show.hide_empty– Hides categories without any products if set to 1.parent– Sets the parent category ID to show only child categories.slidestoshow– Specifies the number of slides to show at once.slidestoscroll– Determines the number of slides to scroll at once.extra_class– Adds extra CSS classes to the slider.className– Appends additional CSS classes to the slider.align– Aligns the slider to the left, center, or right.dev_param_1– Developer parameter for additional customization (not publicly used).dev_param_2– Another developer parameter for additional customization (not publicly used).
Examples and Usage
Basic example – Displaying a product categories slider with default settings.
[wpos_product_categories_slider /]Advanced examples
Displaying a product categories slider with specific categories, ordered by title in descending order, with a custom design and autoplay turned off.
[wpos_product_categories_slider ids="1,2,3" orderby="title" order="DESC" design="design-2" autoplay="false" /]Displaying a product categories slider with a custom number of slides to show and scroll, custom autoplay interval and speed, and custom height.
[wpos_product_categories_slider slidestoshow="4" slidestoscroll="2" autoplay_interval="4000" speed="800" height="400" /]Displaying a product categories slider with arrows and dots navigation turned off, and extra CSS classes for customization.
[wpos_product_categories_slider arrows="false" dots="false" extra_class="custom-class-1 custom-class-2" /]PHP Function Code
In case you have difficulties debugging what causing issues with [wpos_product_categories_slider] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wpos_product_categories_slider', 'pcdfwoo_product_categories_slider' );Shortcode PHP function:
function pcdfwoo_product_categories_slider( $atts, $content = null ) {
// SiteOrigin Page Builder Gutenberg Block Tweak - Do not Display Preview
if( isset( $_POST['action'] ) && ( $_POST['action'] == 'so_panels_layout_block_preview' || $_POST['action'] == 'so_panels_builder_content_json' ) ) {
return '[wpos_product_categories_slider]';
}
// Divi Frontend Builder - Do not Display Preview
if( function_exists( 'et_core_is_fb_enabled' ) && isset( $_POST['is_fb_preview'] ) && isset( $_POST['shortcode'] ) ) {
return '<div class="pcdfwoo-builder-shrt-prev">
<div class="pcdfwoo-builder-shrt-title"><span>'.esc_html__('Product Categories Slider - Shortcode', 'product-categories-designs-for-woocommerce').'</span></div>
wpos_product_categories_slider
</div>';
}
// Fusion Builder Live Editor - Do not Display Preview
if( class_exists( 'FusionBuilder' ) && (( isset( $_GET['builder'] ) && $_GET['builder'] == 'true' ) || ( isset( $_POST['action'] ) && $_POST['action'] == 'get_shortcode_render' )) ) {
return '<div class="pcdfwoo-builder-shrt-prev">
<div class="pcdfwoo-builder-shrt-title"><span>'.esc_html__('Product Categories Grid - Shortcode', 'product-categories-designs-for-woocommerce').'</span></div>
wpos_product_categories_slider
</div>';
}
$atts = extract( shortcode_atts(array(
'orderby' => 'name',
'order' => 'ASC',
'design' => 'design-1',
'ids' => array(),
'loop' => 'true',
'dots' => 'true',
'arrows' => 'true',
'autoplay' => 'true',
'autoplay_interval' => 3000,
'speed' => 600,
'height' => 300,
'number' => 0,
'hide_empty' => 1,
'parent' => '',
'slidestoshow' => 3,
'slidestoscroll' => 1,
'extra_class' => '',
'className' => '',
'align' => '',
'dev_param_1' => '',
'dev_param_2' => '',
), $atts, 'wpos_product_categories_slider') );
$number = pcdfwoo_clean_number( $number, 0 );
$slidestoshow = pcdfwoo_clean_number( $slidestoshow, 3 );
$slidestoscroll = pcdfwoo_clean_number( $slidestoscroll, 1 );
$autoplay_interval = pcdfwoo_clean_number( $autoplay_interval, 3000 );
$speed = pcdfwoo_clean_number( $speed, 300 );
$height = pcdfwoo_clean_number( $height, 300 );
$height_css = ! empty( $height ) ? "height:{$height}px;" : '';
$design = ( $design == 'design-2' ) ? $design : 'design-1';
$ids = ! empty( $ids ) ? explode( ',', $ids ) : array();
$order = ( strtolower( $order ) == 'asc' ) ? 'ASC' : 'DESC';
$orderby = ! empty( $orderby ) ? $orderby : 'name';
$parent = ( isset( $parent ) ) ? $parent : '';
$hide_empty = ( $hide_empty == true || $hide_empty == 1 ) ? 1 : 0;
$loop = ( $loop == 'false' ) ? false : true;
$dots = ( $dots == 'false' ) ? false : true;
$arrows = ( $arrows == 'false' ) ? false : true;
$autoplay = ( $autoplay == 'false' ) ? false : true;
$align = ! empty( $align ) ? 'align'.$align : '';
$extra_class = $extra_class .' '. $align .' '. $className;
$extra_class = pcdfwoo_sanitize_html_classes( $extra_class );
// Slider configuration
$slider_conf = compact('slidestoshow', 'slidestoscroll', 'loop', 'dots', 'arrows', 'autoplay', 'autoplay_interval', 'speed');
// If needwd
wp_enqueue_script( 'wpos-slick-jquery' );
wp_enqueue_script( 'pcdfwoo-public-jquery' );
// Some Variable
$unique = pcdfwoo_get_unique();
// get terms and workaround WP bug with parents/pad counts
$args = array(
'number' => $number,
'orderby' => $orderby,
'order' => $order,
'hide_empty' => $hide_empty,
'include' => $ids,
'parent' => $parent,
'pad_counts' => true,
);
// Get Terms
$product_categories = get_terms( 'product_cat', $args );
ob_start();
if ( $product_categories ) { ?>
<div class="pcdfwoo-product-cat-wrp pcdfwoo_woocommerce_slider pcdfwoo-clearfix <?php echo esc_attr( $design.' '.$extra_class ); ?>">
<div class="pcdfwoo-product-cat pcdfwoo-product-cat-slider" id="pcdfwoo-<?php echo esc_attr( $unique ); ?>" data-conf="<?php echo htmlspecialchars( json_encode( $slider_conf ) ); ?>">
<?php foreach ( $product_categories as $category ) {
$cat_thumb_id = get_term_meta( $category->term_id, 'thumbnail_id', true );
$cat_thumb_url = wp_get_attachment_image_src( $cat_thumb_id, 'medium_large' );
$term_link = get_term_link( $category, 'product_cat' );
$cat_thumb_link = ! empty( $cat_thumb_url[0] ) ? $cat_thumb_url[0] : wc_placeholder_img_src();
?>
<div class="pcdfwoo-product-slider">
<div class="pcdfwoo-product-cat_inner" style="<?php echo esc_attr( $height_css ); ?>">
<a href="<?php echo esc_url( $term_link ); ?>">
<?php if( ! empty( $cat_thumb_link ) ) { ?>
<img src="<?php echo esc_url( $cat_thumb_link ); ?>" alt="<?php echo esc_attr( $category->name ); ?>" />
<?php } ?>
<div class="pcdfwoo_title"><?php echo wp_kses_post( $category->name ); ?> <span class="pcdfwoo_count"><?php echo esc_html( $category->count ); ?> </span></div>
</a>
</div>
</div>
<?php } ?>
</div>
</div>
<?php }
$content .= ob_get_clean();
return $content;
}
Code file location:
product-categories-designs-for-woocommerce/product-categories-designs-for-woocommerce/includes/shortcode/pcdfwoo-slider-shortcode.phpConclusion
Now that you’ve learned how to embed the Product Categories Designs for WooCommerce Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply