Support » Plugin: Product Input Fields for WooCommerce » Text field squished against add to cart

  • lcameron

    (@lcameron)


    We are using the Roisin theme and when we add the gift message either before or after the add to cart it gets squashed up against the add to cart page instead of being the whole width of the area. I have tried playing in CSS but no luck – can you please help?

    https://prnt.sc/1wkmhdn

Viewing 10 replies - 1 through 10 (of 10 total)
  • Great plugin. Exactly what I was looking for.

    But, I actually have the same problem.

    See here: https://snipboard.io/1HMOyv.jpg
    HTML here: https://snipboard.io/MvI7gj.jpg

    It seems you insert your code inside the same div with the quantity and the add to cart button. Maybe it’s because it’s a variable product?

    IMHO the plugin should add a separate div or table with 100% width so the quantity and the add to cart button are below the text input field.`

    • This reply was modified 9 months, 3 weeks ago by alFrame. Reason: Added a screenshot of the html code

    So, I think I figured it out. I am using Oxygen Builder, so your CSS might differ.

    You need o find the div that contains the label and the text field and change the flex-direction to column of that entire div.

    THIS is the problem. The plugin inserts the table inside the div that contains the quantity and the “Add to Cart” button. Unfortunately this change is probably site wide on WooCommerce…

    https://snipboard.io/KI8Jon.jpg

    I then used following in the “Product Input Field Template” of the plugin:
    <tr><td><label for=”%field_id%”>%title%</label></td></tr><tr><td>%field%</td></tr>

    Which creates two table rows instead of one with two cells.

    Then you need to make the text field 100% in width. Use the inspector in your browser and select the text field. For me this was the element with the id “alg_wc_pif_local_1”.

    Then add some padding bottom to the quantity field of WooCommerce.

    Hope this helps until the developer finds time to look into this.

    Any news on this?

    Thanks!

    Thread Starter lcameron

    (@lcameron)

    Thanks @alframe the change to display: column works when I do via developer on Safari etc – but when saved in custom css just overwrites it, even with !important.

    @lcameron that’s strange. Do you have a link to that site?

    Thread Starter lcameron

    (@lcameron)

    @alframe I just gave up on this plugin with lack of support and installed another plugin that worked straight out of the box.

    @lcameron totally understand this. I will do the same. Would you mind sharing the plugin you used?

    Thread Starter lcameron

    (@lcameron)

    @alframe I used PPOM: https://wordpress.org/plugins/woocommerce-product-addon/ which I have used before but since it was just one field I thought I’d try something perhaps simpler. I’ll stick with PPOM from now, it was setup and running fine in no time. I actually use Tyche Plugins (paid for) for a number of clients and support through their paid support is fantastic, so I assumed this might be the same, shame!

    Thanks @lcameron for sharing this.

    It looks like I could add 1 text field to products using their free version, right?

    • This reply was modified 9 months, 2 weeks ago by alFrame. Reason: spell check
    • This reply was modified 9 months, 2 weeks ago by alFrame.

    Thanks once again @lcameron ! The PPOM plugin rocks. I was able to replace the markup plugin and the the field plugin I used in one go and with the free version.

    Funny enough I had to add some CSS again because also the text field of the PPOM plugin was butted up with the quantity and add to cart button. Maybe it’s a WooCommerce problem on variable products.

    Unfortunately this plugin here is dead. Let’s hope the creator is just ignorant but well in real life…

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Text field squished against add to cart’ is closed to new replies.