Docs

[Todd C]

Hey X!

I’m working on a site update and having trouble getting with a few things. They may or may not even be possible. Here’s the long-short of it…

I am working on the update on a local server via MAMP PRO so I can’t send a link to the actual update site. What I am trying to achieve is somewhat active on our current site however (http://mystz.com/products/). I am trying to mimic how the product categories are sortable on the top of the page below the header (Im using a plugin for this but would like to avoid using it). I don’t necessarily need the products to be sorted but am hoping to have the categories listed similarly across the top and react like One Page Navigation does.

I am currently setting the product page up using the “Product Category (Show multiple products in a category)” element inside of a content band. By doing this, I thought I might be able to utilize how One Page Nav works by assigning the ID to scroll to that portion of the page.

I don’t want to loose the normal header that I have on all pages, but I want to add a secondary header on the product page with links to scroll to each content band… and in this case each content band would showcase multiple products in the given category. For example, across the top the categories might list as Tees/Hats/Denim/Accessories/Etc. Each Content Band would be assigned a category via the Product Category element, and by clicking on one of the categories at the top, the page would scroll to that content band.

Is this possible? Thank you in advance for the help, you all rock!

[Lely]

Hello Todd,

What you want to achieve is possible by creating the product page from scratch and not using the default woocommerce product listing page.

This page:http://mystz.com/products/ is not using the actual woocommerce default product list page. It is a normal page created from scratch using visual composer. He is using a woocommerce widget to display the Product Filter navigation at the top. Then you also use Woocommerce product widgets to display list of products or we can use woocommerce shortcode for product list.

Create a content band for the secondary header. On this content band we can use buttons with link to specific content band with product content like below:

[button type="transparent" shape="square" size="mini" href="#category-tees" title="Tees Product"]Tees[/button]
[button type="transparent" shape="square" size="mini" href="#category-hats" title="Hats Product"]Hats[/button]
[button type="transparent" shape="square" size="mini" href="#category-denim" title="Denim Product"]Denim[/button]
[button type="transparent" shape="square" size="mini" href="#category-accessories" title="Accessories Product"]Accessories[/button]

As you can see on the button href value, we will use that ID for each content band with products.
Create different content band for each product categories and then assign ID for each. For example, for category
Tees we will use the value for the href above which is category-tees. Do that for every content band. Then add the products on each content band using the woocomerce shortcode or woocommerce widget. So when we click each button above, it will go to corresponding content band.

Hope this helps.

[Todd C]

Thank you! Got it working perfectly!

[Christopher]

You’re welcome.

[Todd C]

Everything is working great with your help. Is there anyway to make the top row of buttons for each category fixed like a header would be? There are quite a few products so if at the bottom of the page, it takes a good bit of scrolling to get back to the top. I activated the Scroll Top Anchor but ideally I would like the buttons across the top to remain fixed like the header is so the buttons to other categories are always clickable no matter what portion of the page is being viewed.

If that’s not possible, is there a way I can make the content dock show the same category buttons as at the top of the page? Or at least hyperlinks to the categories if I can’t use the buttons in the dock?

Thanks again!

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (min-width:979px){
ul.flv-filter-1.flv_filter {
    position: fixed;
    top: 50px;
    right: 0;
    left: 0;
    z-index: 1030;
    background-color: #fff;
}
}

Hope it helps.

[Todd C]

I tried that and nothing changed. I am using the Integrity stack. Would that make a difference?

I noticed with the button codes you sent I had to make some tweaks to get it to display properly, assuming that was because the link example I sent was Renew stack when I am using Integrity stack.

I also tried by entering the CSS on the page settings where lines of custom CSS can be entered. I was prompted with the attached screenshot showing incompatibility with the code.

[Jade]

Hi Todd,

Please try to add the code in Appearance > Customize > Custom > CSS and see if it makes a difference.

In case you are still having an issue, kindly provide us with the admin access to your site in a private response.

Thank you.

[Todd C]

This reply has been marked as private.

[Christopher]

Hi there,

Would you please upload your site in a temporary domain so we can better help you with this?

Meanwhile, please add a custom class to content band or section like my-class and update your code to :

@media (min-width:979px){
.my-class {
    position: fixed;
    top: 50px;
    right: 0;
    left: 0;
    z-index: 1030;
    background-color: #fff;
}
}

Hope it helps.

[Author]

Posts