Product Pages Changes

Hey guys, thanks so much for all your help!

This is my product page right now, few questions:
http://undonyc.com/product/long-sleeve-slub/

1. One of my product colors is white, so it doesnt show up because of the white bg. Can I add an outline/border to the swatches?

2. I really like the sticky details, but I want this compact layout exactly for the information part (not the product image part):
http://demo.xtemos.com/basel/shop/other/new-brands/yomber-jacket-trim/

I want it to look like this, but be sticky, can we do that or combine them somehow?

3. Why is my product image showing in low res and desaturated, but when you click on it for zoomed in, it looks good? http://undonyc.com/wp-content/uploads/2015/12/Chynna_UNDO9677_S.jpg

4. I cant figure out where to change the “Shipping & Delivery” information shown here:
http://imgur.com/a/v5S0Y

Thanks a ton!

Also, how can I make it so the shopping cart button is to the right of the social buttons instead of on top like it is now?

http://imgur.com/a/J1he8 (I disabled it for now till we can fix its position, here is a screenshot of what it looks like)

http://undonyc.com/

Hello,

Thank you for contacting us.

1. Add this code snippet to the Custom CSS to make your white color swatch visible

.colored-swatch.basel-swatch {
    box-shadow: 1px 1px 4px #b1b1b1;
    -webkit-box-shadow: 1px 1px 4px #b1b1b1;
    -moz-box-shadow: 1px 1px 4px #b1b1b1;
}

2. Unfortunately, we can’t combine that two product layouts. They are different, and it may require some additional code customization work to create a layout you need.

3. We see that your product images have 400×600 size at the moment. You need to increase it in WooCommerce -> Settings -> Products -> Display and regenerate all thumbnails with this plugin https://wordpress.org/plugins/regenerate-thumbnails/

4. You can edit this tab in Theme Settings -> Product page.

5. We need to see shopping cart live to fix it. Please, temporarily enable this widget in the header so we could quickly prepare a solution.

Kind Regards
Xtemos

1. Your CSS Code didnt work to add a border/shadow, how can I fix it?

2. Where can I access/locate both template files myself so I can try to combine elements from both?

3. That worked! Fixed!

4. Cool, that worked, thanks!

5. I made the shopping card and the login text live. They are currently pushing down everything and making it taller, I need it to be in line with the social icons. It should be:
My account/logout then Social icons, then shopping cart icon.

Thank you!!!

Thank you!

my current product page show the size and color information as list box.

how can i change to image (of colors) and text of sizes like the demo page:

http://demo.xtemos.com/basel/shop/man/hooded-jacquard-jumper/

@Aeriform,

1. But we don’t see this code snippet in your page source. Did you add it to the Custom CSS?

2. File name woocommerce/content-single-product.php.

5. Here is a fix for this

.right-column .social-follow {
    display: inline-block;
    padding: 5px 0 0 30px;
}

Regards

Hello @presidiumjeans,

1. Here is video tutorial that will help you create variable products as per our demo https://www.youtube.com/watch?v=gp3SMkKvUvs

2. You can set your home page in admin panel -> Settings -> Reading.

Regards

Thank you so much!

i need to insert one button (or link) with the image of table sizes. its possible?

We suggest you add your sizing table to the additional tab for the product page. You can find a place where you can place it in Theme Settings -> Product page.

Regards

i would like to do like @aeriform website: http://undonyc.com/product/long-sleeve-slub/#

how it is made?

Hi @presidiumjeans,

Unfortunately, we can’t say exactly how @aeriform made this size guide. It may be additional customization or some 3d party plugin.

Hello @aeriform,

It would be very kind of you if you could answer the question regarding size guide button on your product page. How did you make it? 🙂

Thank you in advance.

Kind Regards

Hey guys, indeed I used this plugin:

https://wordpress.org/plugins/productsize-chart-for-woocommerce/

Hey guys, how can I figure out how to combine the sticky layout with the compact layout? I’m not really seeing all the necessary information in the one file content-single-product.php?

Where can I see the html/css for both the sticky version and the compact version? I’m hoping to full the code from one and stick and format it into the other.

Any help is REALLY appreciated! Thank you so much!

Which file is the sticky template and which file is the compact template?

It looks like some php calls and if/then statements. I’m not too familiar with this stuff. If is there is anyway you can help me combine just the compact version of information but into the sticky layout, that would be awesome. I like all the information being on the right side intead of only some and then the rest at the bottom like in the sticky version.

Hell @Aeriform,

Thank you for posting a plugin link here. Hope it will be useful for @presidiumjeans.

Actually, the file we gave you contains HTML code for both sticky and compact product layouts. The main difference is a lot of CSS and JS codes are different for both layouts and there is no an easy way to combine them together. It may require a lot of additional code customization for both CSS and JS and it is out of theme support scope.

Thank you for understanding.

Sticky and Compact layouts can’t be combined physically. Do you want to have all information right to the image (from compact) and it should be also sticky?

Yes, i want all the information to the right of the image (from compact) and it be sticky. I don’t like that only some of the information is to the right, and then the rest is all the way at the bottom after the photos. Is there a way to have all the info to the right of the photos?

I am basically trying to replicate something similar to this, except sticky info on the right:
http://www.nastygal.com/clothes-dresses/carson-cutout-dress
https://www.iroparis.com/us_en/loth-parka.html
Thank you!!

We can help you to set all your product content to the right but then it is impossible to make it sticky. If you want us to help you then please activate a child theme, compact product layout and send us your FTP and admin access.

Regards

How is it impossible to simply have the sticky profile. but with content on the right? The Additional information, shipping, etc, instead of being at the bottom, just being on the right with the rest of the info? It doesnt have to be like the compact theme where it shrink and grows, it can just be listed. Either way, yes if you can help me move the content to the right its appreciated. Can we make an additional template or something so that I don’t lose the capability to have the original sticky or original compact theme?

FTP And login info below:

Thank you so much!!

Please check now. All changes were made for sticky product layout and are located in the child theme.

YES! BEAUTIFUL! THANK YOU SO MUCH!

Only one question right now. Its sticky but if you scroll all the way down it still dissapears. Can we make it so it doesnt disappear?

Also can we make the share buttons like they are here in this example page instead of at the bottom like they are now?

http://demo.xtemos.com/basel/shop/other/new-brands/yomber-jacket-trim/

YOU GUYS ARE AMAZING!

DONE 🙂

@Xtemos Studio – Wow I looked at this page and this is exactly what I wanted too, all the information to the right of the product image. Are you able to provide the CSS for Child theme so I can do this too?
@ Aeriform – your site looks amazing.

Thank you in advance.

Hi @tresteexo,

Here is a CSS for this product page styles

.product-design-sticky .entry-summary.hide-temporary {
    opacity: 1;
    position: static;
}

.hide-temporary .summary-inner {
    bottom: 100px!important;
    top: auto!important;
    position: absolute!important;
    margin-left: -15px!important;
}

.product-image-summary {
	position: relative;
}

also place this hook to the functions.php file in your child theme

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10);
add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 39);

[Author]

Posts