Show more, Add to Cart button and single products

Hello,

I would like to ask you for help with these problems which I am facing:

1. (Mobile) How to make long product descriptions expandable by show more button?
2. (Mobile) How to stretch Add to Cart button to fit fullwidth screen? I have tried set quantity input field to 20% width and the button to 80%, but it makes a bigger empty gap (space) between these two elements.
3. How to show single products with options? Let me explain it. I have some single product like Sand 1 kg, but this product is possible to buy in two more variations – 2 kg and 5 kg. I could make it as a variable product, but that’s not what I need to, because then I would have to have the same variations for every variable product (please correct me if I am wrong) and I have to keep products like single to show all of them in shop page. I have explained it in a attached image.

There are in attachments for clarification.
Thanks in advance for any solutions helping me solve the problems.

Best Regards

——-
EDIT: I can’t remove duplicated images in the attachments

Attachments:

You must be logged in to view attached files.

Hello,

1. Product description is presented in the accordion by default. Please clarify your purpose.

2. Please add this code to the Theme Settings > Custom CSS > Mobile:

.product-image-summary .single_add_to_cart_button {
    margin-bottom: 10px;
    display: block;
    width: 100%;
}

3. Products are the Woocommerce functionality and our theme does not influence that. Woocommerce does not have the option to add variation to the simple product. You can add attributes to the simple product and then filter them.

If you have any questions please feel free to contact us.

Best Regards

Hello,

1. Yes, they are in accordions – in the image show_more.jpg accordions are named as ‘Info’ and ‘Accessories’. But accordion ‘Info’ should also have an option to hide long text and expand it by clicking ‘whole description’ button.

2. Unfortunately the code doesn’t work. ‘Add to cart’ button is fullwidth but not at the same line as the quantity input field, what is desired – please see the image add_to_cart.jpg. I need to have a quantity input field and next to that field ‘Add to cart’ button which will fill the whole line as it is shown in the image.

Best Regards

Attachments:

You must be logged in to view attached files.

Hello,

Sorry for the delay.

Unfortunately, there is no option to show the accordion in the way you want.

2. Please add this code to the Theme Settings > Custom CSS > Mobile:

.woocommerce-variation-add-to-cart{
    display:flex;
}
.product-image-summary .single_add_to_cart_button {
    flex-grow: 3;
}
form.cart{
     display:flex;
}

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts