Return to previous page

Align product carousel - by nic_and_mel - on WordPress WooCommerce support

This topic has 15 replies, 2 voices, and was last updated 8 years, 7 months ago ago by Jack Richardson

nic_and_mel

Participant

September 2, 2015 at 08:00

Hi!

I would like to have the left and right edge of the product carousel (using your products addon in Visual composer) aligned with the items above (and if possible have same padding between the product images as well as above them). How can I fix this (please see this image for clarification on how I mean. As you can see, the left and right edges of the product carousel are not aligned with the items above, and the padding between the products is less then between the items above as well).

How can I achieve this?

#83821 Copied Theme version: 2.4 WooCommerce version: 2.4.6

14 Answers

Jack Richardson

Support staff

September 2, 2015 at 11:42

Hello,

Please provide direct page link and give us access to wp-admin panel.

Thank you.
Best regards,
Jack Richardson.

#83921 Copied

nic_and_mel

Participant

September 2, 2015 at 12:28

See private content.

Please, contact administrator
for this information.

#83944 Copied

nic_and_mel

Participant

September 2, 2015 at 12:31

Oh, and one more thing: If I want to have image/banners on the shop and shop category pages (different for each category page) that is above both the products and the sidebar, how do I do this (I know I can add an image/banner, but it will be to the right of the sidebar, not above it.

Best
Daniel

#83945 Copied

Jack Richardson

Support staff

September 2, 2015 at 16:16

Hello,

Sorry, but I don’t see that slider in your home page. Please provide us with a direct page link.
You can add banner for each category in Products > Categories > edit a category > Category Header.

Best regards,
Jack Richardson.

#84020 Copied

nic_and_mel

Participant

September 3, 2015 at 05:53

Hi!

The page is the start page, http://www.nicandfriends.com. Since the site is under construction, there is a maintenance page, but if you use the provided login, it should work. I have cleared the cashe now. Please try again.

Best regards
Daniel

#84188 Copied

Jack Richardson

Support staff

September 3, 2015 at 08:50

Hello,

When I’m logged in I see this page as your home page http://storage6.static.itmages.com/i/15/0903/h_1441266443_2276293_95821cb5c2.png .
Also I see there are two pages “Home” in Pages section.
They look like this:
http://storage4.static.itmages.com/i/15/0903/h_1441266543_7074903_c910fe5e71.png
http://storage5.static.itmages.com/i/15/0903/h_1441266582_9305136_5652c4c96e.png

So please clarify what page we should check.

Thank you.

Best regards,
Jack Richardson.

#84249 Copied

nic_and_mel

Participant

September 3, 2015 at 09:23

Sorry, I do not understand.

Hi!

There seems to be a problem with the maintenance page (this is the one you see).

I have turned it of for bow.Please check asap, so I can turn it on again.

Just go to http://www.nicandfriends.com now. and if you need to change something, please login at the wp-admin with the login I sent you.

Best regards
Daniel

#84258 Copied

nic_and_mel

Participant

September 3, 2015 at 09:54

Hi!

regarding the banner for shop page and categories, I know where to add them, but they are just above the products, not above the sidebar (the banned is right to the sidebar and above the products on the category pages). How do I solve this?

Best regards
Daniel

#84271 Copied

Jack Richardson

Support staff

September 3, 2015 at 12:13

Hello,

Please look at the screenshot:
http://storage9.static.itmages.com/i/15/0903/h_1441277847_9401918_2c7019c698.png
As you can see images columns are aligned properly. They are shown this way because of padding value 10px. You can remove it but in this case space will be lost and images will be shown like this:
http://storage3.static.itmages.com/i/15/0903/h_1441277986_9990814_13acc50709.png

I’ve uploaded archive-product.php into your child theme directory wp-content/themes/woopress-child/woocommerce and commented the line 42 and added the code <?php etheme_category_header();?> in line 39.

Please check your Shop page now.

Best regards,
Jack Richardson.

#84319 Copied

nic_and_mel

Participant

September 3, 2015 at 16:23

Hi!

Thanks, now the banner is full with. However, it is not aligned properly with the top header and the content below, its a bit to the left (maybe 10px).

Also, will this now work for all category banners in addition to the shop page?

Best regards
Daniel

#84405 Copied
Jack Richardson

Support staff

September 4, 2015 at 09:59
Hello,

Please add this code in child style.css:
```
.woocommerce-page .category-description {
   margin-left: 13px;
}
```
The changes in file archive-product.php will affect all category pages.

Best regards,
Jack Richardson.
#84568 Copied
nic_and_mel

Participant

September 9, 2015 at 17:25

Hello again!

I understand what you mean by padding value, and that the images will be close together. The problem is also that the scroll will be wrong, scrolling a bit less then the full image, so they will bemissplaced after some scrolling. So this is not an option.

However, I was checking out your demos, and there I can definitely se that the left and right edge of the first and final image in the carousel are aligned with the images above. also, the distance between the images in the carousel is the same as between the images above.

So this must mean it is possible to have it like this (this is probably the default look, since it looks much better).

Please see the image HERE. The image to the left is your demo site. As you can see, the padding between the images in the carousel and the images above it is the same, and the left and right image edge of the carousel is aligned perfectly with the outer edge of images above.

However, in my site (image to the right) you clearly se that the distance between the images in the carousel is much less then between the images above, and the far left and far right image edge are not lighted with the images above, or the thin line (just follow the red lines, and you will see).

Since it is like this in your org demo d´site, how can I get it to look like that?

Best regards
Daniel

#85735 Copied

nic_and_mel

Participant

September 14, 2015 at 00:46

Hi!

Any additional info regarding this? Since you have it aligned properly and also correct padding between the images on your demo-site, it should be doable. What am I doing wrong?

Best regards
Daniel

#86475 Copied

Jack Richardson

Support staff

September 14, 2015 at 11:32

Hello,

The reason is our demo uses Products elements with Grid type and your products are displayed with slider.
Try to change it to Grid in the element settings and check.

Best regards,
Jack Richardson.

#86597 Copied
Viewing 15 results - 1 through 15 (of 15 total)