Introduction

The Featured Product Gallery widget in Handmade eCommerce places Product titles in an overlay above the action button along with the price, rather than placing the title under the image as it is in Handmade. You can either change the color of the overlay, or hide it completely and add the titles under the image.

 

The Solution

Changing the Overlay Color

Go to Theme Options > General and add the following to the Custom CSS area. Change the color codes to your desired colors.
.price-overlay {
    background: #FFFFFF !important;
    color: #333 !important;
}
.price-overlay a{color #333 !important;}

This ensures both normal text and link text are colored.

Hide the Overlay and Add Titles Below the Image

Modifications are your responsibility to maintain!  Always be sure to update your theme to the latest version before editing template files.

On your computer, open handmade-ecommerce/ocmx/widgets/widget.slider.php in a text or HTML editor and find this code:

Begin on line 28:

<div>
      <span>
             <a href="<?php echo get_permalink( $loop->post->ID ) ?>"><?php echo $_product->get_price_html(); ?></a>
      </span>
        <h3><a href="<?php echo get_permalink( $loop->post->ID ) ?>"><?php the_title(); ?></a></h3>
</div>
        <?php woocommerce_template_loop_add_to_cart( $loop->post, $_product ); ?>
</div>

Place your cursor after the ending </div> and hit enter for a new line. Copy this title tag and paste it there:

<h3><a href="<?php echo get_permalink(  $loop->post->ID ) ?>"><?php the_title();  ?></a></h3>

You should now have:

<div>
&nbsp;&nbsp;<span>
&nbsp;&nbsp;&nbsp; <a href="<?php echo  get_permalink( $loop->post->ID ) ?>"><?php echo  $_product->get_price_html(); ?></a>
&nbsp;&nbsp;</span>
&nbsp;<h3><a  href="<?php echo get_permalink( $loop->post->ID )  ?>"><?php the_title(); ?></a></h3>
</div>
&nbsp;<?php woocommerce_template_loop_add_to_cart( $loop->post, $_product ); ?>
</div>
<h3><a href="<?php echo get_permalink( $loop->post->ID ) ?>"><?php the_title(); ?></a></h3>

Next, find this code ending on line 59:

<div>
   <span>
     <a href="<?php echo get_permalink( $loop->post->ID ) ?>"><?php echo $_product->get_price_html(); ?></a>
</span>
<h3><a href="<?php echo get_permalink( $loop->post->ID ) ?>"><?php the_title(); ?></a></h3>
   </div>
      <?php woocommerce_template_loop_add_to_cart( $loop->post, $_product ); ?>
 </div>

Make a new line below that </div> and paste the same title tag:

<h3><a href="<?php echo get_permalink(  $loop->post->ID ) ?>"><?php the_title();  ?></a></h3>

Save the file and upload it to wp-content/themes/handmade-ecommerce/ocmx/widgets/ via FTP