Customization of Woocommerce Superstore theme

I placed this in the general topic as this is not related to the themes provided by WPMU Dev. That said, here's what I'm after.

While in live support chat with Ari, he asked me to place this post in the forum. I am working with a customer to modify their 'superstore' woocommerce theme to display a page like this: https://wpspring.com/products/gravity-forms-authorize-net-add-on/

This page, you'll notice has the price, cart form, excerpt or short description. Then below it has tabs (used via a plugin) to place it below and a wider part of the page, so that it can be displayed more aesthetically.

I am working on this site for the customer to obtain the same layout on the product page: http://www.dealbandits.com/product/product-example/

I have checked the theme to ensure that no theme options are available, changed everything I can possibly see to try and mimic the sites layout, but to no avail. The customer is a hosting customer of mine and they are in need of help. I recommended they go to the woocommerce team, but they say that they weren't able to help them achieve their hopeful outcome.

I can supply login details if needed to the WPMU staff to attempt to assist or direct me. Documented changes would be needed if possible (PLEASE) so I can inform the customer of them.

Thanks in advance Ari (aristath) :wink:

  • aristath

    Hello again Matt!

    Could you please send some user credentials so that I may take a look?
    - Send an email using our secure contact form on https://premium.wpmudev.org/contact/
    - Select "I have a different question" from the dropdown
    - On the subject enter "Attn: aristath".
    - Include the URL of this post in your message so that I may track this issue
    - Include a link to your website
    - Include your superadmin credentials (username + password)
    - Include your FTP user/pass

    Cheers,
    Ari.

  • aristath

    Hello again @Matt, I hope you're well today!

    I'm terribly sorry for the delay on this thread...
    I just logged-in on your site and fixed this for you.
    This is what I did:
    1. I installed this plugin: https://wordpress.org/plugins/simple-custom-css/ (it was needed to be able to add some custom CSS
    2. I added this CSS on Appearance => Custom CSS:

    body.single-product #main .summary {
      float: left;
    }

    3. I had to create a new template file on your theme:
    wp-content/themes/superstore/woocommerce/single-product/tabs/tabs.php and added this in there:

    <?php
    /**
     * Single Product tabs
     *
     * @author 		WooThemes
     * @package 	WooCommerce/Templates
     * @version     2.0.0
     */
    
    if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
    
    /**
     * Filter tabs and allow third parties to add their own
     *
     * Each tab is an array containing title, callback and priority.
     * @see woocommerce_default_product_tabs()
     */
    $tabs = apply_filters( 'woocommerce_product_tabs', array() );
    
    if ( ! empty( $tabs ) ) : ?>
    
    </div>
    
    	<div class="woocommerce-tabs">
    		<ul class="tabs">
    			<?php foreach ( $tabs as $key => $tab ) : ?>
    
    				<li class="<?php echo $key ?>_tab">
    					<a href="#tab-<?php echo $key ?>"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', $tab['title'], $key ) ?></a>
    				</li>
    
    			<?php endforeach; ?>
    		</ul>
    		<?php foreach ( $tabs as $key => $tab ) : ?>
    
    			<div class="panel entry-content" id="tab-<?php echo $key ?>">
    				<?php call_user_func( $tab['callback'], $key, $tab ) ?>
    			</div>
    
    		<?php endforeach; ?>
    	</div>
    	<div>
    <?php endif; ?>

    It seems to be good now. :slight_smile:

    I hope that helps!

    Cheers,
    Ari.

  • Matt

    Thanks for the reply Ari - I've updated the client - they are asking if there is a way to include the "short description" (I believe its the excerpt section) that they can put that below the cart? As you can see between the 2 examples given in the initial post, the content displays differently. Under the cart area, there is what I believe to be this:

    <?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?>

    I'm assuming this would be the custom css also for that same thing? Or would this be in a different file? Again, just for the short description. I've added screenshots of each so that you can see the difference and what I'm referring to.

    Thanks..

  • aristath

    Hello again!

    Fixed. :slight_smile:
    Changes made:
    On your function.php file I added the following:

    /**
     * Add the excerpt on the top, right below the post title
     */
    function custom_content_in_single_product_view() {
    	global $post; ?>
    
    	<div class="custom-excerpt">
    		<?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ); ?>
    	</div>
    	<?php
    
    }
    add_action( 'woocommerce_single_product_summary', 'custom_content_in_single_product_view', 7 );

    Then on the custom CSS area on your dashboard I added this:

    .custom-excerpt {
      float: none;
      clear: both;
    }

    Please note that now the excerpt is displayed 2 times: 1 below the post-title, and a 2nd time in the "Description" tab.
    If you want to remove the excerpt from the description tab (I wasn't sure you wanted to do that) you will have to open the woocommerce/single-product/tabs/description.php file inside your theme and delete this line:
    <?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?>

    I hope that helps!

    Take care,
    Ari.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.