Title: Position
Last modified: October 6, 2025

---

# Position

 *  [markk26](https://wordpress.org/support/users/markk26/)
 * (@markk26)
 * [8 months ago](https://wordpress.org/support/topic/position-36/)
 * When you have attributes and try to use your plugin, the attribute label is next
   to the attribute options…
   How can I make it appear above, with the options starting
   on the right side, and also how can I increase the padding of the options?
 * [https://cdn.imgpile.com/f/ZHqogIn_xl.png](https://cdn.imgpile.com/f/ZHqogIn_xl.png)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Thread Starter [markk26](https://wordpress.org/support/users/markk26/)
 * (@markk26)
 * [8 months ago](https://wordpress.org/support/topic/position-36/#post-18669864)
 * I added this code to functions.php and now it looks like this: [https://cdn.imgpile.com/f/CMZmefm_xl.png](https://cdn.imgpile.com/f/CMZmefm_xl.png)
 *     ```wp-block-code
       function custom_product_variations_styles() {// Only applies CSS to single product pagesif ( is_product() ) {?><style type="text/css">/* --- LABEL "Format" --- */.woocommerce div.product form.cart .variations label {/* Ensures the label occupies its own line and is on the left */margin-top: 90px !important;display: block !important;float: none !important; /* Remove any float that might be pulling it to the side */position: relative !important;top: -110px !important; /* Adjust the top if you need to move the label */font-size: 1.5em !important;font-weight: 400 !important;color: #000 !important;margin-bottom: 100px !important; /* Space below the label */text-align: left !important;padding-left: 0 !important;width: 100% !important; /* Ensures the label occupies the full width */}/* --- OPTIONS CONTAINER (where A4, A5, A6, A7 are) --- *//* This is the div with the 'value' class that is the label's sibling */.woocommerce div.product form.cart .variations .value {display: flex !important; /* Uses flexbox to organize the options */flex-wrap: wrap !important; /* Allows options to break lines */justify-content: flex-start !important; /* Aligns options to the left */gap: 15px !important; /* Spacing between options (horizontal and vertical) */margin-top: 5px !important; /* Space between the label and the beginning of the options */padding: 0 !important; /* Removes any default padding that might push */clear: both !important; /* **VERY IMPORTANT:** Ensures it starts on a new line below any float. */width: 100% !important; /* Ensures the options container occupies the full width */box-sizing: border-box !important;}/* --- INDIVIDUAL VARIATION OPTIONS (A4, A5, A6, A7) --- */.select_option .yith_wccl_value {display: flex !important; /* Centers the content (text) vertically and horizontally */align-items: center !important; /* Centers the content vertically */justify-content: center !important; /* Centers the content horizontally */min-width: 180px !important; /* Sets a minimum width for the buttons */min-height: 120px !important; /* Sets a minimum height for the buttons */padding: 20px 20px !important; /* I adjusted the padding. It can be 50px 30px if you want more space inside */text-align: center !important; /* Centers the text inside each button */border: 2px solid #ccc !important;border-radius: 12px !important;background: #fff !important; box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; cursor: pointer !important; transition: all 0.3s ease !important; box-sizing: border-box !important; } /* --- EFFECT ON MOUSE HOVER / SELECT --- */ .select_option .yith_wccl_value:hover, .select_option .yith_wccl_value.selected { border-color: #000 !important; background: #f9f9f9 !important; transform: scale(1.05); } /* Adjust YITH's "check" icon so that it is inside the box */ .yith_wccl_value.selected::after { position: absolute !important; top: 5px !important; right: 5px !important; font-size: 1.2em !important; line-height: 1 !important; width: auto !important; height: auto !important; } </style> <?php }}add_action( 'wp_head', 'custom_product_variations_styles' );
       ```
   
 * But I need it this way: [https://cdn.imgpile.com/f/wXXMejs_xl.png](https://cdn.imgpile.com/f/wXXMejs_xl.png)
   
   Also, the names of the image labels aren’t appearing.
 *  Thread Starter [markk26](https://wordpress.org/support/users/markk26/)
 * (@markk26)
 * [8 months ago](https://wordpress.org/support/topic/position-36/#post-18669976)
 * With CSS and help from a freelancer, I was able to adjust the positions, but 
   the image term labels still aren’t showing…
   Do you know if you could help me 
   with this?
 *  [Facundo A.](https://wordpress.org/support/users/aranofacundo/)
 * (@aranofacundo)
 * [7 months, 4 weeks ago](https://wordpress.org/support/topic/position-36/#post-18678796)
 * Hi there,
 * I hope you’re well. To check what is happening, please send us the link to the
   product with the issues so we can check it.
 * We’ll remain at your disposal.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Position’ is closed to new replies.

 * ![](https://ps.w.org/yith-woocommerce-product-add-ons/assets/icon-128x128.gif?
   rev=3142291)
 * [YITH WooCommerce Product Add-Ons](https://wordpress.org/plugins/yith-woocommerce-product-add-ons/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/yith-woocommerce-product-add-ons/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/yith-woocommerce-product-add-ons/)
 * [Active Topics](https://wordpress.org/support/plugin/yith-woocommerce-product-add-ons/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/yith-woocommerce-product-add-ons/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/yith-woocommerce-product-add-ons/reviews/)

## Tags

 * [attributes](https://wordpress.org/support/topic-tag/attributes/)

 * 3 replies
 * 2 participants
 * Last reply from: [Facundo A.](https://wordpress.org/support/users/aranofacundo/)
 * Last activity: [7 months, 4 weeks ago](https://wordpress.org/support/topic/position-36/#post-18678796)
 * Status: not resolved