Woocommerce Collection Pages lacking navigation - how to add?

Support
#1

Hi there!
On my site - https://dhbrownstaging.wpengine.com/collections/panoramas/, the collection pages are lacking a way to navigate back to the store easily, or to the next collection and I am wondering how I can add that.

Each of the product pages have that functionality - https://dhbrownstaging.wpengine.com/storefront/panoramas/desert-storm/. I’d like to add the same icons and feel to the collection pages. I have attached screenshots on what I am talking about.

How could I add this to the collection pages? I have a child theme set up and ready to go.

Thanks for the help!

#2

Hi,

Regretfully, It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

To give you something to start with, you can add the code below in your child theme’s functions.php file.


function add_my_nav() {
   if(x_is_product_category() || is_product_tag()) {
?>
<div class="entry-top-navigation">
        <a href="<?php echo x_get_shop_link(); ?>" class="entry-parent" title="<?php $title; ?>"><i class="x-icon-th" data-x-icon-s="&#xf00a;"></i></a>        
 </div>

<?php
   }
}
add_action('x_after_view_global__slider-above', 'add_my_nav');

Thanks for understanding. Take care!

#3

Hi Paul,
Thanks for the help with this and the starting point. That almost did the trick, now I can’t figure out how to have that navigation show below the main nav. Could you please help me getting it to display a bit lower on the page under the navigation? I have attached a screenshot.

Thanks so much!

#4

Hi,

Please change this line of code

add_action('x_after_view_global__slider-above', 'add_my_nav');

with this

add_action('x_after_view_global__slider-above', 'add_my_nav', 20);

If that doesn’t work, you can try changing the hook

add_action('x_after_site_begin', 'add_my_nav');

Addtional Info:


https://developer.wordpress.org/reference/functions/add_action/

Hope that helps

#5

Hmmm, neither of those changes did anything.

What else could I try? I really apprecaite the help!

#6

Hey @powrider686,

Sorry for the confusion. You will need to copy woocommerce.php located in x\framework\views\ethos to the same folder structure in your child theme like x-child\framework\views\ethos.

Open the copied file and replace <?php if ( x_is_product() ) : ?> with <?php if ( x_is_product() || is_product_category() ) : ?>

Please note that the next and previous buttons are designed for the single entries. My point here is to lead you only to achieve what you need. Issues that would arise from the use of this customization nor enhancements are not covered by our support.

Hope that helps and thank you for understanding.

#7

Ok, so I did that but it doesn’t work properly. The forward and back jumps around products and categories and I’m not sure how to fix that. Or is there an easy way to only show the Left icon which gets you back to the Shop page, and not show the forward and back icons?

I had another idea, which was to add breadcrumbs to these pages so that people could navigate backwards if they need. So I enabled those globally, and hid them from all of the other pages on the site. But now it shows the default shop page instead of the page I have built - https://dhbrownstaging.wpengine.com/storefront/

Here’s an example - https://dhbrownstaging.wpengine.com/collections/fine-art-nude/

So how could I add some text and headline to the default shop page to achieve the same look? I’m also having trouble getting the default shop page to be full width, and I am unable to select the right css selectors to make this page full width. https://dhbrownstaging.wpengine.com/default-shop/

Thank you!

#8

Hi,

  1. As my colleague have stated, the navigation will only work in single entry pages.
    You can add your left icon link to shop page in woocommerce.php file that you have added in your child theme.

You may add this above the <?php if ( x_is_product() ) : ?> line of code

<?php if ( is_product_category() ) : ?>
            <div class="entry-top-navigation">
                    <a href="<?php echo x_get_shop_link(); ?>" class="entry-parent" title="<?php $title; ?>"><i class="x-icon-th" data-x-icon-s="&#xf00a;"></i></a>        
             </div>
        <?php endif; ?>

  1. To make your default shop page full width, you can add the code below in Theme Option> CSS 
.archive.woocommerce .x-container.max.width.main {
    max-width:100%;
    width:90%;
}
  1. There is actually a shop title in Ethos Shop but I can see you have added a code to hide it.

You can add it back using this code

.archive.woocommerce .h-landmark {
    display:block;
}

You can then change the text in Theme Options > Ethos > SHOP OPTIONS

Hope this helps

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.