Docs

[jbillh]

Hey Guys,

First off, thank you very much for your time and patience. What I’d like to accomplish is shown in the attachment; I’d like to put an image below the top menu bar on a shop/product listing that, when clicked, takes you to another shop page. In this scenario, I would have 4 small thumbnail-size images, one of which would take me to the accessories page or something. Let me know if you need anything from me or have any questions.

Thanks Much,

Adam

[Friech]

Hi Adam,

Thanks for writing in! Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Cheers!

[jbillh]

This reply has been marked as private.

[Friech]

Hi Adam,

You can add this to your child theme’s functions.php file.

function custom_header() { 
 if(is_woocommerce()): ?>

    <div class="custom-header mtl">
     
        <div class="x-container max width">
        <div class="x-column x-sm x-1-1">
          <ul class="x-block-grid four-up">
              <li class="x-block-grid-item">
                  <a href="#"><img src="YOUR THUMBNAIL IMAGE URL HERE" alt="some alternate text here" /></a>
              </li>
              <li class="x-block-grid-item">
                  <a href="#"><img src="YOUR THUMBNAIL IMAGE URL HERE" alt="some alternate text here" /></a>
              </li>
              <li class="x-block-grid-item">
                  <a href="#"><img src="YOUR THUMBNAIL IMAGE URL HERE" alt="some alternate text here" /></a>
              </li>
              <li class="x-block-grid-item">
                  <a href="#"><img src="YOUR THUMBNAIL IMAGE URL HERE" alt="some alternate text here" /></a>
              </li>
            </ul>
          </div>
          </div>

    </div>
  <?php endif; 
}
add_action('x_after_view_global__navbar','custom_header', 30);

I did wrap it with a x-block-grid-item class so it would be responsive. Replace the YOUR THUMBNAIL IMAGE URL HERE string with your actual image URL and replace the # with the link where you want to be that image to be directed.

Hope it helps, Cheers!

[jbillh]

Hey Friech,

First off, thank you very much for taking the time to write that code for me.

Is there any way for me to specify which pages/products this function will show up on? We’d like it to show up on (4) or (5) separate product pages and nowhere else.

Thanks So Much,

Adam

[Paul R]

Hi Adam,

Yes, it’s possible.

You may change this line

 if(is_woocommerce()): ?>

to this

 if(is_woocommerce() &&  get_the_ID() == 1): ?>

Change 1 with your product id

https://support.woothemes.com/hc/en-us/articles/203054126-How-to-Find-a-WooCommerce-Product-ID

Hope that helps.

[Author]

Posts