Docs

[nathangreene23]

Hello there,

I have a basic store set up with the woocommerce plug-in. I would like to add some styling to it.

How can I had a banner image to the shop page? I would like it to display right before my products.

http://www.cathedralcafe.co/shop/

I am using the integrity stack of x theme.

thank you

[Rue Nel]

Hi There,

Thanks for writing in!

To add a banner image to the shop page, please add the following code in your child theme’s functions.php file

// Add a banner image  before the products
// =============================================================================
function add_banner_image(){ ?>

  <div class="custom-banner mbm">
    <img src="//placehold.it/1200x400/ff0055" alt="Banner Image" >
  </div>

<?}
add_action('woocommerce_before_shop_loop', 'add_banner_image');
// =============================================================================

We would loved to know if this has work for you. Thank you.

[nathangreene23]

Yes it worked! I replaced the place holder with an image url from my media.

Although the image does not extend the whole width of the page.

How can I get the image to stretch the full width of the page? The original size of the image is 1200×790.

Thank you for your help.

[nathangreene23]

Another question that may fall into this category.

How can I get rid of the text beneath the title that says “Welcome to our online store, take some time to browse thru our items.” ?

Also, how can I change the title “The Shop” to “Threads Gifts” ?

Thank you

[Paul R]

Hi,

1. Please change the code above to this.

// Add a banner image  before the products
// =============================================================================
function add_banner_image(){ ?>
  <?php if(x_is_shop()):?>
  <div class="custom-banner mbm">
    <img src="//placehold.it/1200x400/ff0055" alt="Banner Image" >
  </div>
  <?php endif; ?> 
<?php }
add_action('x_after_view_integrity__landmark-header', 'add_banner_image');
// =============================================================================

Then add this in Custom > Edit Global CSS in the Customizer

.woocommerce-page .p-landmark-sub {
   display:none;
}

2. You can change The Shop under Integrity > SHOP OPTIONSin the Customizer

See screenshot – http://screencast.com/t/ZYrybxdH4e

Hope that helps.

[Author]

Posts