[DEMO CANDGLE SHOP] Shop page

[steven-f5f2e7bd]

Hi guys,

I would really like to have the same shop page is your demo page (https://jupiterx.artbees.net/candle-shop/shop/)
1. Image + tekst
2. All the products without the sorting filter
3. Sale label on top left
4. How can I change the blue Filter button
5. I don’t want to show the amount of results

Can you please help me with that :)?

Thanks in advance.

Kind regards,
Steven

schermafbeelding_2020-08-17_om_15.52.25.png

[Amir Rather]

Hi There

I changed the Slug of the Page to /our-shop because the /shop was pointing towards the default shop archive page generated by Woocommerce, please cehck now https://studionoell.nl/our-shop/

Regards

[steven-f5f2e7bd]

Hi!

Sorry that was not the problem, if you check this page now: https://studionoell.nl/shop/

It is not the same as the demo of Candle:

1. Image + tekst
2. All the products without the sorting filter
3. Sale label on top left
4. How can I change the blue Filter button
5. I don’t want to show the amount of results

Can you please help me with that?

Thanks in advance.

Kind regards,
Steven

[Amir Rather]

This reply has been marked as private.

[steven-f5f2e7bd]

Hi Amir,

Thank you for helping me! I now understand what you mean. Is there an option that I can change the URL to /shop/ instead of /our-shop/?

When I change it to /shop/ I see like you said a whole different kind of page.

And I have another question, https://studionoell.nl/our-shop/ prices in the filter are in Dollars. I need it in Euro but I can not find where I can change it..

Kind regards,
Steven

[Amir Rather]

This reply has been marked as private.

[steven-f5f2e7bd]

Hi!

Now I have another issue, if you check this page: https://studionoell.nl/our-shop/
I would like to change the white frame to off-white (#f8f2e5). How can I do that?

 

[Amir Rather]

Try the below CSS in Jupiter X > Customize > Addiional CSS:

.page-id-55 .jupiterx-main-content {
    background: #f8f2e5;
}

Regards

[steven-f5f2e7bd]

Hi,

1. I also would like to change all the product pages to this off white background color. For example this page: https://studionoell.nl/shop/norwegian-ii/
2. And the related products underneath the main product on the same product page as well. The related products text is not readable. Check image.
3. What is the best way to change the name of the Add to cart button, now it is “In winkelmand” but I would like to change it to “In de winkelmand”?
4. Last question, I installed the plugin Custom Forms and I added a form on our contact page (https://studionoell.nl/contact/) But now I want the input fields add full width, exact the same width as the button. Check image 2.

Thanks in advance!

schermafbeelding_2020-09-22_om_18.34.52.png 2.png

[Amir Rather]

Add the below CSS as well:

.single .jupiterx-main-content {
    background: #f8f2e5;
}

I see the Add to cart is already translated https://prnt.sc/um7z1n am I missing something?

This looks like a simple form you could easily use the Raven Form Widget intead, which can be styled easily within Elementor.

Regards

[steven-f5f2e7bd]

Hi Amir,

I have another question.. I would like to have the related products (Wat vind je hiervan?) on 1 row per product in the mobile version. Now there are two products in each row. How can I change this to one product per row? (check screenshot). Note: on the desktop version, the current situation is perfect!

Thank you very much again!

Cheers,
Steven

 

schermafbeelding_2020-10-06_om_21.33.21.png

[Tatyana Hutsol]

Hello,

 

Sorry for a delay.

Please add this code in Jupiter X > Customize > Additional CSS:

@media (max-width: 480px){.related li.product.type-product {
width: 100% !important;
}}

 

Thank you.

Regards.

[steven-f5f2e7bd]

Hi!

Thank you very much, it is working!

I think I have another problem…

When I add a product to the cart and visit the cart and press the button “Verder winkelen” in English: Continue shopping. Than you will be redirected to the cart page again. But I would like that a visitor will go to /webshop/

This problem is the same as in the checkout page (afrekenen), it looks like the url isn’t working properly.
Hope you have a solution for this..

Cheers,
Steven

[Amir Rather]

For now, the solution is to modify the URL in the core file. You can do that by editing the functions.php file on line 105 present in wp-content/themes/jupiterx/lib/api/woocommerce folder.

 

You will find this code: $shop_page_url = esc_url( get_permalink( wc_get_page_id( 'shop' ) ) );

 

You can replace it with: $shop_page_url = esc_url( 'https://my-site.com/shop-url' );

 

Regards.

[steven-f5f2e7bd]

Thank you very much Amir! Two other questions:

1. When Im at the check out on mobile, the payment options are not in line with the checkboxes.. What is going wrong over here? (check screenshot)
2. I would like to speed up the webshop a little bit. Do you have some ideas how this website will perform better? I already deactivated all of the plugins that I do not use, changed all the images to low file size, activated gzip compression. When I use Pagespeed insight: https://developers.google.com/speed/pagespeed/insights/?hl=nl&url=studionoell.nl the score is not very good…

I hope you have a solution for both questions

checkout.jpeg

[Tatyana Hutsol]

Hello,

 

Sorry for a delay.

Please add this code in Jupiter X > Customize > Additional CSS:

@media (max-width: 767px){.woocommerce-checkout #payment ul.payment_methods li input {
float: left;
}
.woocommerce-checkout #payment ul.payment_methods li {
line-height: normal !important;
}}

 

2. Please check this article about Google PageSpeed:
https://wp-rocket.me/blog/the-truth-about-google-pagespeed-insights/

Due to GTMetrix result https://gtmetrix.com/reports/studionoell.nl/JsancK41 , please do the following:

• Add Expired Headers in the .htaccess file https://betterstudio.com/blog/add-expires-headers-htaccess/
• use CDN, e.g. Cloudflare
• serve scaled images https://www.fixrunner.com/serve-scaled-images-wordpress/

Also check this blog post https://themes.artbees.net/blog/speed-up-your-website-in-jupiter-x/

 

Thank you.

Regards.

[steven-f5f2e7bd]

Hello!

I have another issue with the header, on two pages (/het-verhaal and /contact) we have some issues with the header. It seems like that there is some extra space/padding above the header. On our shop page and homepage everything is fine but on the other two pages something is wrong. I can not find what the problem is over here.

I added some screenshots as well.

Hope you have a solution for this.

Kind regards,
Steven

01_correct.png 02_wrong.png 03_wrong.png

[Tatyana Hutsol]

Hello,

 

Sorry for a delay.

I see it’s caused by margin-top value https://take.ms/UkBU2 .

Check if it’s set in the page editor > Posts Options > Main tab and in Customizer > Site Settings > Style tab > Main.

Also provide correct wp-admin credentials as I can’t log in with the previous ones.

 

Thank you.

Regards.

[steven-f5f2e7bd]

Hi guys,

I have another question about the cart page. We would like to have some small changes in the coupon code (cadeau kaart code) usage. We would like to have the apply (inwisselen) button next to the field where they can add the coupon code.

Can you please help me out with this. I added a screenshot and an image with how I would like to have it in the end.

Thanks in advance.

Cheers,
Steven

printscreen.png how-it-should-be.jpg

[Amir Rather]

Hello

Please try the below CSS:

.woocommerce #content table.cart td.actions .coupon, .woocommerce table.cart td.actions .coupon, .woocommerce-page #content table.cart td.actions .coupon, .woocommerce-page table.cart td.actions .coupon {
    height: 64px;
}
input#pwgc-apply-gift-card {
    position: relative;
    left: 224px;
    bottom: 60px;
}

[steven-f5f2e7bd]

Hi Amir,

It is working for desktop button the button disappeared on mobile, check screenshot. Do you have a solution for this?

Kind regards,
Steven

schermafbeelding_2020-12-24_om_12.57.56.png

[Amir Rather]

Please try this Code instead of above:

@media handheld, only screen and (min-width: 1024px) {
.woocommerce #content table.cart td.actions .coupon, .woocommerce table.cart td.actions .coupon, .woocommerce-page #content table.cart td.actions .coupon, .woocommerce-page table.cart td.actions .coupon {
    height: 64px;
}
input#pwgc-apply-gift-card {
    position: relative;
    left: 224px;
    bottom: 60px;
}}

[steven-f5f2e7bd]

Hi!

Thanks! I think we are almost there! Would be really nice if the button can be placed next to the input field (check screenshot). If this is not possible maybe we can place the button under the input field (only on mobile).

What do you think?

Kind regards,
Steven

[steven-f5f2e7bd]

Forgot to add the screenshot.

schermafbeelding_2020-12-28_om_09.45.00.png

[Amir Rather]

Hey,

Please add this as well:

@media handheld, only screen and (max-width: 768px) {
input#pwgc-apply-gift-card {
    margin-top: -58px;
}}

[Author]

Posts