Change Shortcode wrapper in Woocommerce

Question

I'm using Wordpress 3.8 + Woocommerce 2.0 I need to change the class of the wrapper that Woocommerce generate when I use a shortcode.

I use this shortcode: [recent_products per_page="12"] And the output is:

<div class="woocommerce">
   the_product_loop....
</div>

I want to obtain

<div class="MYCUSTOMCLASS">
   the_product_loop....
</div>

But I can't find where I have to change the code... In class-wc-shortcodes.php file I've found the declaration of the function that generates the wrapper:

public static function shortcode_wrapper(
    $function,
    $atts    = array(),
    $wrapper = array(
        'class'  => 'woocommerce',
        'before' => null,
        'after'  => null
    )
)

But... I don't want to change the core files of Woocommerce plugin, It's possible to define my custom class via functions.php??

Polygraph

Answer 1

You can create your own shortcode, just a clone of the default one, but with that change, so paste this in your functions.php:

function custom_recent_products_FX($atts) {
    global $woocommerce_loop, $woocommerce;

    extract(shortcode_atts(array(
        'per_page'  => '12',
        'columns'   => '4',
        'orderby' => 'date',
        'order' => 'desc'
    ), $atts));

    $meta_query = $woocommerce->query->get_meta_query();

    $args = array(
        'post_type' => 'product',
        'post_status' => 'publish',
        'ignore_sticky_posts'   => 1,
        'posts_per_page' => $per_page,
        'orderby' => $orderby,
        'order' => $order,
        'meta_query' => $meta_query
    );

    ob_start();

    $products = new WP_Query( $args );

    $woocommerce_loop['columns'] = $columns;

    if ( $products->have_posts() ) : ?>

        <?php woocommerce_product_loop_start(); ?>

            <?php while ( $products->have_posts() ) : $products->the_post(); ?>

                <?php woocommerce_get_template_part( 'content', 'product' ); ?>

            <?php endwhile; // end of the loop. ?>

        <?php woocommerce_product_loop_end(); ?>

    <?php endif;

    wp_reset_postdata();

    return '<div class="MY_CUSTOM_CLASS">' . ob_get_clean() . '</div>';
 }
 add_shortcode('custom_recent_products','custom_recent_products_FX');

Notice at the end of that function the "MY_CUSTOM_CLASS", change that for your needs.

This will create a new shortcode, almost same than the "recent_products" one but with that only change.

So to output this, just use on template:

 echo do_shortcode('[custom_recent_products per_page="3"]');

Or in your posts:

 [custom_recent_products per_page="3"]

I don´t know if this is the best approach, but for what i can see, the class "woocommerce" is returned directly on the recent_products shortcode function as html, so i can´t imagine how to filter or hook this by anotherway.

Hope that helps and sorry my bad english :)

Interpleader

Thanks for the answer, this can be an approacch, but I don't want to make a custom function for each kind of shortcode that the customer which will use into the website.. I think there is a way to extend the shortcode_wrapper function... but my newbie status about php programming does not allow me to find the solution! – Polygraph

But the problem here is that i belive that "wrapper" with default class "woocommerce", can´t be filtered in another way, just see the class is there: return '<div class="MY_CUSTOM_CLASS">' . ob_get_clean() . '</div>'; I mean is not defined on the shortcode_wrapper. – Interpleader

by the way, you can just put the default shortcode inside a div, let´s say with class "my_recent_products", so you will have .my_recent_products > .woocommerce, and that way you can overide css styles, if that´s what you need. – Interpleader

you are right, but all these solutions are workarounds... I believe instead that there may be a direct approach – Polygraph

Answer 2

you can use following trick to over right wrapper function :
Here i have created a shortcode for checkout and shortcode and change wrapper
shortcode will be [overright_checkout_of_shortcode] 
function shortcode_handler($atts) {
    $classget=new WC_Shortcodes();
    $wrapper = array(
            'class'  => '',
            'before' => '<div id="accordion" class="panel-group faq_group checkout-group" role="tablist" aria-multiselectable="true" >',
            'after'  => '</div>'
        );
  return $classget->shortcode_wrapper( array( 'WC_Shortcode_Checkout', 'output' ), $atts ,$wrapper);
 }
add_shortcode('overright_checkout_of_shortcode','shortcode_handler');

Achromatism

That works flawlessly! I had to change it a little bit to simply add additional css classes to <div class="woocommerce"> wrapper under my account pages. Later I simply updated/saved the default WooCommerce page for My Account under Admin pages, removed the [woocommerce_my_account] shortcode and replaced by the newly created one. – Rosetta

@AdrianoMonecchi (y) – Achromatism