Change height of boxes where attribute options appear

[gizmo_girl]

I am using 1.5.7c with the ZCA Bootstrap template. I want to resize the boxes on the right hand side where the attribute options appear. Can the spacing be changed to move these options closer together so there's less scrolling and to make it look neater?

Also curious why I have extra images appearing as "view larger image" in some products, but not in others. How do I prevent that from happening?

[mc12345678]

While I may not be able to directly help at the moment, the short answer is yes it can be done (right side adjustments), though it is easier for those that are able to review the CSS if a specific page is provided so that the CSS modifications necessary either for all product, some product or other related groups can be provided.

As for the "other images" issue, not sure which aspect is an issue, is it that additional images appear, that the additional images have inconsistent link titles provided, that their size(s) are inconsistent, or some mixture of those or others? To demonstrate the "differences" it would be suggested that a link to each different "response" be provided.

[gizmo_girl]

While I may not be able to directly help at the moment, the short answer is yes it can be done (right side adjustments), though it is easier for those that are able to review the CSS if a specific page is provided so that the CSS modifications necessary either for all product, some product or other related groups can be provided.

As for the "other images" issue, not sure which aspect is an issue, is it that additional images appear, that the additional images have inconsistent link titles provided, that their size(s) are inconsistent, or some mixture of those or others? To demonstrate the "differences" it would be suggested that a link to each different "response" be provided.

I’ll do my best to explain. I have a category for two sided tags and a category for reflective tags. The 2-sided tags have the pet’s name on front & owner info on the back. The reflective tags have the pet’s name and owner info all on the front with a reflective back. Although they look similar, they are set up a bit differently. I want to keep the images and categories separate to reduce confusion for customers.

In link #1, the item is from the 2-sided category and has a 2-sided tag as the main image, which is correct. The larger image below that is from the reflective category. I didn’t add this (not intentionally, at least) and I don’t know where it came from. I’m trying to determine how or why the product is showing an image from a different category. Link #2 shows only one image at the top, which is exactly what I wanted it to do. It’s not pulling a second image from a different category.

Link #1: https://www.personalizedpetid.com/in...products_id=23

Link #2: https://www.personalizedpetid.com/in...products_id=21

[simon1066]

I’ll do my best to explain. I have a category for two sided tags and a category for reflective tags. The 2-sided tags have the pet’s name on front & owner info on the back. The reflective tags have the pet’s name and owner info all on the front with a reflective back. Although they look similar, they are set up a bit differently. I want to keep the images and categories separate to reduce confusion for customers.

In link #1, the item is from the 2-sided category and has a 2-sided tag as the main image, which is correct. The larger image below that is from the reflective category. I didn’t add this (not intentionally, at least) and I don’t know where it came from. I’m trying to determine how or why the product is showing an image from a different category. Link #2 shows only one image at the top, which is exactly what I wanted it to do. It’s not pulling a second image from a different category.

Link #1: https://www.personalizedpetid.com/in...products_id=23

Link #2: https://www.personalizedpetid.com/in...products_id=21

See this link in the help docs: https://docs.zen-cart.com/user/image...-product-pages

In your Link #1 the larger image is an 'additional' image. It is displayed because its name is

football_ref.gif

with the main product image named

football.gif

Both images share a common filename of 'football'.

You can either rename your images or turn off 'additional' images altogether, if you're sure you won't need them.

[keneso]

simon1066 was faster ;)
end edit

The double image is because of the image names
See here: https://docs.zen-cart.com/user/image..._to_a_product/

For the boxes height check the following two files
includes/templates/YOUR_TEMPLATE/templates/tpl_product_info_display.php
includes/templates/YOUR_TEMPLATE/templates/tpl_modules_attributes.php

Find

class="card mb-3"

and

class="card-body p-3"

And change/play with the mb-3 and p-3 i.e. make them mb-1 and p-1, or remove them, and see how you like it.

That said bootstrap is optimized for mobile, and google may not like clickable/selectable items too close to each other, hence you may consider letting it as it is.

[gizmo_girl]

See this link in the help docs: https://docs.zen-cart.com/user/image...-product-pages

In your Link #1 the larger image is an 'additional' image. It is displayed because its name is

football_ref.gif

with the main product image named

football.gif

Both images share a common filename of 'football'.

You can either rename your images or turn off 'additional' images altogether, if you're sure you won't need them.

Got it, thank you!!

[gizmo_girl]

simon1066 was faster ;)
end edit

The double image is because of the image names
See here: https://docs.zen-cart.com/user/image..._to_a_product/

For the boxes height check the following two files
includes/templates/YOUR_TEMPLATE/templates/tpl_product_info_display.php
includes/templates/YOUR_TEMPLATE/templates/tpl_modules_attributes.php

Find

class="card mb-3"

and

class="card-body p-3"

And change/play with the mb-3 and p-3 i.e. make them mb-1 and p-1, or remove them, and see how you like it.

That said bootstrap is optimized for mobile, and google may not like clickable/selectable items too close to each other, hence you may consider letting it as it is.

Thank you! I’ll tinker with it and test on my phone to check it. I wondered about the optimization for mobile devices, but I wanted to at least see what it would do. I just had no idea where to look. The info is much appreciated!

[dbltoe]

Just my three cents (inflation) but, the larger problem is that anyone can click on add to cart and place this item in the shopping cart without making ANY selection.

https://docs.zen-cart.com/user/admin...ttribute-flags is extremely helpful in this area.

If it's not a text entry like the pet's name, we use "Please Select WHATEVER" as the option value with a sort order of 0. The WHATEVER being what the option is all about. On Background for your first link, you used Make a Selection and set it as the default seleceted (the orange color) BUT, you also need to set Used For Display Purposes Only: (the yellow) to Yes as well. This way, the customer cannot check out without making a selection. You will need to add as the first Selection above Alligator, something like "My Own Design". That will allow them to tell the cart they are using their own and the cart will say, "Okay, you selected your own." Otherwise, it will not let them checkout without a background.
IF it were a situation where you wanted only their design and offered none of your own, this option would have the Attributes Required for Test or File: (the red) set to yes.
For the Pet's name and other text entries, you would set the red to yes. You can also provide some sample text for them.
For Lines 1 thru 4, you could set them to yes in red and have the sample text something like "N/A or Your Phone Number" or "N/A or Your Address".
If you make Additional Notes required by selecting yes in the red, the sample might be N/A or Let Us Know Any Additional Needs or Questions."

BTW, to quickly make changes to items like this that already exist, you can just click on the color (selection) you want to change. If the color is solid, the option is on.

[gizmo_girl]

Just my three cents (inflation) but, the larger problem is that anyone can click on add to cart and place this item in the shopping cart without making ANY selection.

https://docs.zen-cart.com/user/admin...ttribute-flags is extremely helpful in this area.

If it's not a text entry like the pet's name, we use "Please Select WHATEVER" as the option value with a sort order of 0. The WHATEVER being what the option is all about. On Background for your first link, you used Make a Selection and set it as the default seleceted (the orange color) BUT, you also need to set Used For Display Purposes Only: (the yellow) to Yes as well. This way, the customer cannot check out without making a selection. You will need to add as the first Selection above Alligator, something like "My Own Design". That will allow them to tell the cart they are using their own and the cart will say, "Okay, you selected your own." Otherwise, it will not let them checkout without a background.
IF it were a situation where you wanted only their design and offered none of your own, this option would have the Attributes Required for Test or File: (the red) set to yes.
For the Pet's name and other text entries, you would set the red to yes. You can also provide some sample text for them.
For Lines 1 thru 4, you could set them to yes in red and have the sample text something like "N/A or Your Phone Number" or "N/A or Your Address".
If you make Additional Notes required by selecting yes in the red, the sample might be N/A or Let Us Know Any Additional Needs or Questions."

BTW, to quickly make changes to items like this that already exist, you can just click on the color (selection) you want to change. If the color is solid, the option is on.

Thank you for pointing this out! I completely missed that!! The explanation and effort is much appreciated!

[dbltoe]

Us Texans have to stick together.
Another often missed item that makes customers irate is using Delivered as an Order Status under admin >> Localization. We add Shipped. With Amazon, UPS, and others sending text that an item was delivered, using Delivered makes the customer head for their porch. If it's not there, you'll get an irate phone call wondering just who took the package off their porch.