Using Fevr Theme, I can’t get the align right!

Here is what I did and works just in case:

.woocommerce .product-add-to-cart-container .add-to-cart-inner {
margin-top: 0px;
float: inherit;
margin-bottom: 0px;
margin-right: 0px;
}

.woocommerce div.product form.cart .qib-container .quantity input.qty, .woocommerce table.cart td.product-quantity .qib-container .quantity input.qty, .woocommerce li.product .qib-container .quantity input.qty {
line-height: 1.2;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 35px;
width: 45px;
min-height: initial;
min-width: initial;
box-shadow: none;
font-size: 22px;
border-style: solid;
border-width: 0px;
border-radius: 2px;
}

.woocommerce div.product form.cart .qib-button, .woocommerce table.cart td.product-quantity .qib-button, .woocommerce li.product .qib-button {
line-height: 1.5;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 35px;
width: 35px;
vertical-align: top;
font-size: 20px;
letter-spacing: 0;
border-style: solid;
border-width: 1px;
border-color: #272727;
transition: none;
border-radius: 5px;
color: #fff;
background: #444444;
}

.qib-container {
display: inherit;
float: left;
}

• This reply was modified 5 years, 7 months ago by infernus.
• This reply was modified 5 years, 7 months ago by infernus.

Hello,

first of all many thanks for 5-star rating for my plugin.

I’ve checked the website and found the following unrelated issue – there is a border-radius specified for the quantity field’s DIV element. It makes the corners of the border in its child element (input) disappear. It can be solved by putting this style rule in child theme’s CSS:

.woocommerce div.product form.cart .qib-container div.quantity,
.woocommerce table.cart .product-quantity .qib-container div.quantity,
.woocommerce li.product .qib-container div.quantity {	
    border-radius: 0;
}

It will be fixed in the next version that I’ll release this weekend or on Monday.

I also noticed that on the product page you used border-radius 5px for the buttons, that’s a good call, I will be increasing border-radius from 2px to 4px in the next release, to give the buttons and the quantity input border a more smooth look in the unmerged version.

The setting “Cart page align” concerns only the cart page. The link that you provided links to the product page. Where the change should be applied? If on the product page, would you like to have both the .qib-container and add to cart button aligned to the right? Would their position be swapped (meaning .qib container directly to the right)? On the cart page, “Cart page align” setting will not change anything because .qib-container has exactly the same width as the column that contains it.

Best regards,

Ryszard

• This reply was modified 5 years, 7 months ago by taisho.
• This reply was modified 5 years, 7 months ago by taisho.

I see that I came to the party a bit late and you had it already solved ?? That’s why I didn’t realize at once what was the actual problem.

Thanks for posting the solution. With default WooCommerce, the submit button is a direct child of the .qib-container DIV that the plugin adds. I have seen some websites using 2 buttons, for example, one Add to cart, another Add and order. This is the first time that I see such a button to be in an additional container, therefore CSS of my plugin only floats the button within this .add-to-cart-inner container, instead of floating the container itself.

I will see if there is a seamless way for the plugin to make it work out of the box, without breaking the things for other HTML structures and CSS settings and hopefully include it in the next release.

• This reply was modified 5 years, 7 months ago by taisho.
• This reply was modified 5 years, 7 months ago by taisho.

Hey! Thank you for the plugin, my friend! Fevr Theme seems odd to these type of plugins, a lot of things messed up. Your plugin was the only one that worked fine with this theme, pretty good coded. I had to play a litle with the float and display until make .qib-container go to the left, it was always in to the right. Finally I understood that about the cart page, I was kind of confuse, now I get it.

Thank you for the reply!

• This reply was modified 5 years, 7 months ago by infernus.
• This reply was modified 5 years, 7 months ago by infernus.
• This reply was modified 5 years, 7 months ago by infernus.
• This reply was modified 5 years, 7 months ago by infernus.
• This reply was modified 5 years, 7 months ago by infernus.