CPTUI Extended Shortcode Templates: Custom WooCommerce Data

The latest update to CPTUI Extended, version 1.1, has added a slew of improvements, including new and enhanced shortcode templates for WooCommerce and Easy Digital Downloads. Since displaying your post types is the core feature of the plugin, we wanted to include a few templates that made it even easier. To learn how to create shortcodes and templates, keep reading!

CPTUI Extended Core Templates

  • Default – A list with title, excerpt and thumbnail of chosen post type
  • Single Post – Displays a single post
  • Single Page – Displays a single page

And the recently added:

  • List – An ordered or unordered list with title or excerpt
  • WooCommerce Product – Displays a list of products with add to cart functionality
  • Easy Digital Downloads – Displays a list of downloads with add to cart functionality

Template Hooks

We’ve added a ton of template hooks to the core template files. There are hooks above and below most elements. These action hooks are there for you to add extra content. You can add things like post meta or any other information. Learn about the new template hooks in the Pluginize codex.

Hook Example

Let’s go over the code to add meta to a template hook. The WooCommerce Product template displays the product title, featured image, description, pricing, and “Add to Cart” button.

cptui extended woo shortcode template
WooCommerce product template before adding ratings information


cptui extended woo shortcode template
WooCommerce product template after adding ratings information


Example Hook for Adding Ratings Information

The example below adds product rating information below the featured image using the hook template_woo_after_featured_image. 

The ratings code was copied from the WooCommerce template file rating.php.

function cptui_add_woo_rating_below_image( $attributes ) {

    global $product;
    if ( isset( $product ) ) {

        if ( get_option( 'woocommerce_enable_review_rating' ) === 'no' ) {

        $rating_count = $product->get_rating_count();
        $review_count = $product->get_review_count();
        $average      = $product->get_average_rating();

        if ( $rating_count > 0 ) { ?>

            <div class="woocommerce-product-rating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
                <div class="star-rating" title="<?php printf( __( 'Rated %s out of 5', 'woocommerce' ), $average ); ?>">
                    <span style="width:<?php echo ( ( $average / 5 ) * 100 ); ?>%">
                        <strong itemprop="ratingValue" class="rating"><?php echo esc_html( $average ); ?></strong> <?php printf( __( 'out of %s5%s', 'woocommerce' ), '<span itemprop="bestRating">', '</span>' ); ?>
                        <?php printf( _n( 'based on %s customer rating', 'based on %s customer ratings', $rating_count, 'woocommerce' ), '<span itemprop="ratingCount" class="rating">' . $rating_count . '</span>' ); ?>

        } ?>

add_action( 'template_woo_after_featured_image', 'cptui_add_woo_rating_below_image' );


Make it Your Own!

You can add any post meta or other information that you want. The post global is accessible in the action hook and with the many hooks available in the template files, you can really customize the display to show what works best for you and your business!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.