Knowledgebase

How to Change The Product Title Style or Location on Featured Product Gallery Widget

Intro

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 […]

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

Get 15% off!

Signup and get 15% off any of our Ghost or Framer themes immediately