[Support request] I have purchased your template and have some questions.

[Andrew]

Hello, I purchased your template and have some questions.
1. Is it possible to make header like this https://prnt.sc/rf48ce and how it to do?
2. I made Import demo “niche” but some elements do not work correctly. I can not resize image http://joxi.ru/8AnEbDPU7QBzk2

With best regards, Andrew.

[David]

Hi there,

1. Take a little bit of work and some CSS.
To begin with you need to disable the Navigation as Header option in Customizer > Layout > Header
Then you can add the Search Widget and the other content using a HTML Widget – by selecting Customizer > Widgets > Header Widget.

Once you have done that let me know and i can help with the CSS to align them.

2. Niche adds a Custom Gallery stack using the GP Elements module, which then uses some CSS to create the columns you see. Go to Customizer > Additional CSS and look for:

.woo-sumamry-wrap {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: auto;
    margin-bottom: 80px;
}

Then change the % values in grid-template-columns: 60% 40%;

[Andrew]

Hello, thank you for your help. As for item 1 I would try it in a couple of days.

I have changed CSS as you recommended, it works. Is it possible to change single product to the default view Generatepress template?

[David]

You need to:

1. Appearance > Elements – delete these two hook elements:

Gallery Stack
Close Summary Wrap

2. In Customizer > Additional CSS remove the CSS immediately below these comments:

/*=== WOOCOMMERCE ===*/
/*--- SINGLE PRODUCT ---*/

/* Stacked Gallery for desktop and sticky summary */

[Andrew]

Hello, I would like to ask you how I can fix some bugs on Desktop http://joxi.ru/L216Ge1TgNpqxA and mobile menu https://yadi.sk/i/h704yq0Kbmfwvw

[David]

I cannot see those problems on the URL you provided. Did you resolve the two issues ? Let me know.

[Andrew]

Hello, I did not resolve these issues, I`l try to record video to show it. On mobile you can see it if will not emulate it on browser but to use real mobile phone.

[David]

OK so the overflow issue on mobile is being caused by the Woocomerce Color Widget in the sidebar. Add this CSS to fix it:

.woof_container_color {
    overflow-x: hidden;
}

I am not seeing the other issue on desktop – should i be looking at a certain page ?

[Andrew]

As for mobile it perfectly works, thank you very much. As for PC you can have a look here https://yadi.sk/i/qSAjjBYXMZH9gg

[David]

OK try enabling the Customizer > Layout > Header –> Navigation as Header option:

https://docs.generatepress.com/article/navigation-as-a-header/

[Andrew]

Hello, I have some more questions.

1. Your theme needs to be updated, is it save and it does not overwrite all my settings? Is it possible to use child theme?
2. Can I use CSS file instead of option in your theme? http://joxi.ru/MAjEBVPUx9yK62
3. How I can make “add to cart button” in a category page because current theme does not have this button? http://joxi.ru/a2Xzny8cDvOd7r

[David]

1. Updating the Theme will NOT overwrite your Customizer settings, Additional CSS or any other plugin settings. Yes – you can use a Child Theme:

https://docs.generatepress.com/article/using-child-theme/

Be sure to read all the notes before installing a Child Theme.

2. Yes – this would be the styles.css in a Child Theme.
Make a copy of your CSS before activating child theme.

3. Remove this CSS in Additional CSS:

/* Remove add to cart styling */
.woocommerce ul.products li.product a.button {
    padding: 5px 0;
    color: inherit;
    background-color: #ffffff;
    text-transform: uppercase;
}

/* Transform add to cart and pricing on hover */
@media (min-width: 768px) {
    .woocommerce ul.products li.product a.button {
        transform: translateY(0);
        width: 100%;
        opacity: 0;
        transition: all 0.4s;
    }

    .woocommerce ul.products li.product:hover a.button,
    .woocommerce ul.products li.product:hover .price {
        transform: translateY(calc(-100% - 10px));
        opacity: 1;
    }

    .woocommerce ul.products li.product .price {
        opacity: 1;
        transition: all 0.4s;
    }

    .woocommerce ul.products li.product:hover .price {
        opacity: 0;
        transform: translateY(calc(-100% - 10px));
    }
}

[Author]

Posts