X Pro and Setting up Woocommerce

Support
#1

Hi,

I just tried to setup woocommerce for the first time and I am having some setup issues.

First with the single product I have added, on the product page I am trying to style similar your demo here - http://demo.theme.co/shop-integrity/product/flying-ninja/ as you will see on my link below the main image is chopped off, and the additional image is not showing underneath. I also want to add the border around the image like you have. Also the review tab is not showing.

In my ‘customise’ panel if I go to Custom > Woocommerce > Navbar Menu On then my header gets all messed up (see screenshot).

Finally, how do I change the basket link in my top navbar to an icon, which then shows the number of items in the basket when customers add items?

#2

Hi There,

This is what I am seeing right now on the product page. There’s no overlapping anymore.

Woocommerce navigation menu option will only work on legacy header not on header made with Pro builder. For Pro, try to remove the Basket link from your navbar and then use the available Cart Dropdown element:

Regarding review tab, did you enable it on the settings? It seems not when I check the source code of the product page. If yes, please share wordpress credentials on a secure note so we can check.

Hope this helps.

#3

Thanks for the reply Lely. I had enabled reviews, so I have added a secure note with WP details so you can check.

On the product page, you’re seeing an image with only half of the it showing. I am trying to create the product page to mirror your demo here - http://demo.theme.co/shop-integrity/product/flying-ninja/

The full image is showing there, and the secondary images show under that. There is also nice theme border around the image.

#4

Hey @ocduk,

One of the third party plugins could be conflicting with the review tab. Please try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

For the border and secondary images, it is how WooCommerce displays the gallery images in the past version. Our demo installs are not updated to the current version yet. You need to revert to the old display by adding this code in your functions.php

add_action( 'after_setup_theme', 'remove_wc_new_features', 100 );

function remove_wc_new_features() { 
	remove_theme_support( 'wc-product-gallery-slider' );
}

Please be careful when copy pasting PHP code because it could cause fatal errors.

Regarding the image size, you need to set your own image sizes in WooCommerce > Settings > Products > Display. Please visit this link for additional information.

Thanks.

#5

Thanks for the reply.

I made the functions.php change which correctly moved the thumbnails below the main image. But I am still struggling to get the images to display correctly.

I tried changing the image sizes and regenerating the images but I am still struggling to display images correctly across the entire Woocommerce pages (product pages / checkout etc).

If I am reading correctly, my Pro theme is only trying to force the images to a maximum height of 260, where your demo theme forces 479 x 479.

With the reviews tab not showing, like suggested I disabled every plugin other than woocommerce and the review tab still doesn’t show?

#6

I checked your Single Product image size and it’s set to 491 x 260.

Please change it and regenerate thumbnails again.

I have not yet found what’s causing the Review tab issue. Please open a separate thread for this so we could focus on that issue alone. In the separate thread, please provide FTP access also.

Thanks.

#7

Thanks again.

Is it possible there is a problem with the woocommerce theme software in Pro? I regenerated the image sizes but they still don’t show correctly. The theme seems to be overriding the woocommerce settings?

The review tab now shows, but the attributes are not showing. The image settings are not being respected.

To try and keep things simple I am using your shop image by default. I reset my image settings to these:

This is what shows:

I am just trying to get it to look like your demo with similar image sizes, borders around images, sale tab showing on image and way images display.

#8

I discovered now that something in your custom CSS is causing the image size issue. I removed all of them in the Customizer (preview only) and the issue was gone.

Regarding the attributes, what are you expecting to see? Please open and answer in a separate thread in order to avoid confusion.

Thank you.

#9

Thank you for your helpful replies. I have managed to edit the CSS and I am almost there now. One final issue with the way the products display is the main product image. On your demo clicking the main product image opens up a nice pop up box with the main image and arrows to any sub images as below.

But with my site, the main product image is more of a zoom in. Clicking the sub images pops up across the entire site width and looks wrong. http://ocduk.net/product/pin-badge/

#10

Hello There,

Thanks for updating in! The product gallery zoom is taking effect in your site. To resolve this, you will have to update the code given by Christian and use this instead:


add_action( 'after_setup_theme', 'remove_wc_new_features', 100 );

function remove_wc_new_features() { 
  remove_theme_support( 'wc-product-gallery-zoom' );
  remove_theme_support( 'wc-product-gallery-slider' );
}

Please let us know if this works out for you.

#11

Thank you, that’s controlling better. Is it possible to control the popout window that code creates so it appears like the demo, with the image inside a central white background with the left/right arrows underneath rather than at the side? is that CSS controlled somewhere?

#12

Hello There,

We cannot check your site because it is asking for the authentication credentials.

Would you mind providing us the access?

Thanks.

#13

Hi that is the secure note :slight_smile:

#14

Hello There,

Thanks for updating in! I was able to logged in and checked the page. The lightbox is a new feature of WooCommerce. They have replaced the old one with Photoswipe which is what you are seeing now. Our demo has not been updated yet and it is using a much older version of WooCommerce.

To change the background colors, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.pswp__container {
    background-color: red;
}

.pswp img {
    background-color: white;
    padding: 30px;
}

Feel free to change the colors since I used distinct to easily identify the changes.

Please let us know how it goes.

#15

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