Elementor Widget Customization

May 22, 2025 · AI Conversations

User
<style>
.latest-arrivals-wrapper {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

   .latest-arrival-row {
    display: grid
;
    grid-template-columns: 32% 35% 30%;
    align-items: center;
    gap: 25px;
    padding:20px 40px 20px 85px;
    border: 1px solid #000;
    background-color: #fff;
    position: relative;
}

  .latest-arrival-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #FF3333;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    padding: 6px 20px;
    border-radius: 0 0 0 3px;
    width: 29%;
}


        /* LEFT COLUMN */
        .arrival-left {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .arrival-title {
            font-size: 31px;
            font-weight: 900;
            margin: 0;
            color: #000;
        }

        .arrival-subtitle {
            font-size: 14px;
            margin: 0;
            color: #444;
        }

        .arrival-price {
            font-size: 85px;
            font-weight: 700;
            color: #000;
        }

        .arrival-cart-btn {
            background: #FF3333;
            color: white;
            padding: 10px 15px;
            font-weight: 900;
            border: none;
            border-radius: 4px;
            text-transform: uppercase;
            font-size: 16px;
            cursor: pointer;
            width: fit-content;
            font-family: 'Montserrat';
        }

        /* MIDDLE COLUMN - IMAGE */
        .arrival-image {
            text-align: center;
        }

  .arrival-image img {
    max-width: 100%;
    max-height: 380px;
    object-fit: contain;
}

        /* RIGHT COLUMN */
        .arrival-right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 10px;
        }

        .arrival-description {
            font-size: 14px;
            line-height: 1.4;
            color: #333;
        }

        .arrival-rating .star-rating {
            color: #f5a623;
            font-size: 14px;
        }

        .arrival-similar-btn {
            background: #000;
            color: #fff;
            padding: 10px 20px;
            font-weight: bold;
            text-transform: uppercase;
            border-radius: 4px;
            text-decoration: none;
            font-size: 13px;
            width: fit-content;
        }
</style>

LATEST ARRIVAL

Assistant
Here is your updated Elementor widget code with the following changes implemented:

—

### ✅ Changes Implemented:
1. **"Add to basket" → "Add to cart"** (standard WooCommerce behavior already shows "Add to cart", so no change needed unless you want custom text).
2. **Short description** is displayed **below the title**.
3. **Full product description** now appears on the **right side**, not the short description.

—

### ✅ Updated PHP Widget Code Snippet:

// Replace inside render() function where you're looping products

<div class="latest-arrival-row">
    <?php if ($lp === 1): ?>
        <div class="latest-arrival-badge">LATEST ARRIVAL</div>
    <?php endif; ?>

    <!-- LEFT -->
    <div class="arrival-left">
        <h3 class="arrival-title"><?php the_title(); ?></h3>

        <!-- Short Description Below Title -->
        <div class="arrival-subtitle">
            <?php echo $product->get_short_description(); ?>
        </div>

        <div class="arrival-price"><?php echo wc_price($product->get_price()); ?></div>

        <a href="<?php echo esc_url($product->add_to_cart_url()); ?>"
           data-quantity="1"
           class="arrival-cart-btn button add_to_cart_button ajax_add_to_cart"
           data-product_id="<?php echo esc_attr($product->get_id()); ?>"
           data-product_sku="<?php echo esc_attr($product->get_sku()); ?>"
           aria-label="<?php echo esc_attr($product->add_to_cart_description()); ?>"
           rel="nofollow">
            Add to cart
        </a>
    </div>

    <!-- MIDDLE -->
    <div class="arrival-image">
        <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>">
    </div>

    <!-- RIGHT -->
    <div class="arrival-right">
        <div class="arrival-description">
            <?php
            $desc = $product->get_description();
            echo wp_trim_words(strip_tags($desc), 30, '...');
            ?>
        </div>
        <div class="arrival-rating"><?php echo wc_get_rating_html($product->get_average_rating()); ?></div>
        <a href="<?php echo get_permalink(); ?>" class="arrival-similar-btn">SHOP FOR SIMILAR PRODUCTS</a>
    </div>
</div>

—

### 💡 Notes:
– If you **want to change the “Add to cart” text to “Add to basket”**, just replace this line:

Add to cart

with:

Add to basket

Let me know if you want the **short description to appear in italic or smaller font**, or need **fallbacks** in case any description is missing.

User
<style>
.latest-arrivals-wrapper {
            display: flex;
            flex-direction: column;
            gap: 33px;
        }

   .latest-arrival-row {
    display: grid
;
    grid-template-columns: 32% 35% 30%;
    align-items: center;
    gap: 25px;
    padding:20px 40px 20px 85px;
    border: 1px solid #000;
    background-color: #fff;
    position: relative;
}

  .latest-arrival-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #FF3333;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    padding: 6px 20px;

    width: 29%;
}


        /* LEFT COLUMN */
        .arrival-left {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .arrival-title {
            font-size: 31px;
            font-weight: 900;
            margin: 0;
            color: #000;
        }

      .arrival-subtitle {
    font-size: 31px;
    margin: 0;
    color: #000;
    font-weight: 500;   
    font-family: 'Montserrat';
}

        .arrival-price {
            font-size: 85px;
            font-weight: 700;
            color: #000;
        }

        .arrival-cart-btn {
            background: #FF3333;
            color: white;
            padding: 10px 15px;
            font-weight: 900;
            border: none;
            border-radius: 4px;
            text-transform: uppercase;
            font-size: 16px;
            cursor: pointer;
            width: fit-content;
            font-family: 'Montserrat';
        }

        /* MIDDLE COLUMN - IMAGE */
        .arrival-image {
            text-align: center;
        }

  .arrival-image img {
    max-width: 100%;
    min-height: 382px;
    object-fit: contain;
}

        /* RIGHT COLUMN */
        .arrival-right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 10px;
        }

 .arrival-description {
    font-size: 16px;
    font-family: 'Montserrat';
    line-height: 1.4;
    color: #000;
    font-weight: 500;
}

        .arrival-rating .star-rating {
            color: #f5a623;
            font-size: 14px;
        }

   .arrival-similar-btn {
    background: #000;
    color: #fff;
    padding: 10px 15px;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    width: fit-content;
}
</style>

LATEST ARRIVAL

Assistant
Here's the **responsive CSS** for screen sizes **below 1200px**. This will ensure your Elementor widget layout adapts perfectly on tablets and smaller screens **without altering the desktop layout**.

—

### ✅ Add the following responsive CSS **below your existing “ tag** inside `render()`:

@media (max-width: 1199px) {
  .latest-arrival-row {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .arrival-left,
  .arrival-right {
    width: 100%;
  }

  .arrival-image {
    text-align: center;
    margin: 20px 0;
  }

  .arrival-image img {
    max-height: 280px;
    min-height: unset;
  }

  .arrival-title {
    font-size: 24px;
    text-align: left;
  }

  .arrival-subtitle {
    font-size: 16px;
    text-align: left;
  }

  .arrival-price {
    font-size: 48px;
    text-align: left;
  }

  .arrival-cart-btn {
    font-size: 14px;
    padding: 8px 12px;
  }

  .arrival-description {
    font-size: 14px;
  }

  .arrival-similar-btn {
    font-size: 14px;
    padding: 8px 12px;
  }

  .latest-arrival-badge {
    font-size: 14px;
    padding: 6px 12px;
    width: auto;
    right: 10px;
  }

  .arrival-rating .star-rating {
    font-size: 12px;
  }
}

—

### ✅ Key Highlights:
– Layout changes to **single-column stacking** below 1200px.
– **Image centers**, and spacing adjusts automatically.
– **Font sizes scale down** for readability.
– Ensures **buttons and content don’t overflow** on smaller screens.

Let me know if you want to add further breakpoints for mobile (like `

User
<style>
.latest-arrivals-wrapper {
            display: flex;
            flex-direction: column;
            gap: 33px;
        }

   .latest-arrival-row {
    display: grid
;
    grid-template-columns: 32% 35% 30%;
    align-items: center;
    gap: 25px;
    padding:20px 40px 20px 85px;
    border: 1px solid #000;
    background-color: #fff;
    position: relative;
}

  .latest-arrival-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #FF3333;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    padding: 6px 20px;

    width: 29%;
}


        /* LEFT COLUMN */
        .arrival-left {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .arrival-title {
            font-size: 31px;
            font-weight: 900;
            margin: 0;
            color: #000;
        }

      .arrival-subtitle {
    font-size: 31px;
    margin: 0;
    color: #000;
    font-weight: 500;   
    font-family: 'Montserrat';
}

        .arrival-price {
            font-size: 85px;
            font-weight: 700;
            color: #000;
        }

        .arrival-cart-btn {
            background: #FF3333;
            color: white;
            padding: 10px 15px;
            font-weight: 900;
            border: none;
            border-radius: 4px;
            text-transform: uppercase;
            font-size: 16px;
            cursor: pointer;
            width: fit-content;
            font-family: 'Montserrat';
        }

        /* MIDDLE COLUMN - IMAGE */
        .arrival-image {
            text-align: center;
        }

  .arrival-image img {
    max-width: 100%;
    min-height: 382px;
    object-fit: contain;
}

        /* RIGHT COLUMN */
        .arrival-right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 10px;
        }

 .arrival-description {
    font-size: 16px;
    font-family: 'Montserrat';
    line-height: 1.4;
    color: #000;
    font-weight: 500;
}

        .arrival-rating .star-rating {
            color: #f5a623;
            font-size: 14px;
        }

   .arrival-similar-btn {
    background: #000;
    color: #fff;
    padding: 10px 15px;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    width: fit-content;
}

@media (max-width: 1199px) {
  .latest-arrival-row {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .arrival-left,
  .arrival-right {
    width: 100%;
  }

  .arrival-image {
    text-align: center;
    margin: 20px 0;
  }

  .arrival-image img {
    max-height: 280px;
    min-height: unset;
  }

  .arrival-title {
    font-size: 24px;
    text-align: left;
  }

  .arrival-subtitle {
    font-size: 16px;
    text-align: left;
  }

  .arrival-price {
    font-size: 48px;
    text-align: left;
  }

  .arrival-cart-btn {
    font-size: 14px;
    padding: 8px 12px;
  }

  .arrival-description {
    font-size: 14px;
  }

  .arrival-similar-btn {
    font-size: 14px;
    padding: 8px 12px;
  }

  .latest-arrival-badge {
    font-size: 14px;
    padding: 6px 12px;
    width: auto;
    right: 10px;
  }

  .arrival-rating .star-rating {
    font-size: 12px;
  }
}
</style>

LATEST ARRIVAL

Assistant
Your provided code is well-structured and mostly correct. However, after a detailed review, here are a few **minor improvements and fixes** to ensure best practices, performance, and avoid possible issues:

—

### ✅ ✅ No Major Errors Found — Widget Will Work

But here are **suggested improvements**:

—

### 🟡 1. **Missing `esc_attr()` or `esc_url()` for `get_the_post_thumbnail_url()`**
This helps prevent issues with unexpected characters in URLs.

**Fix:**

<img src="<?php echo esc_url(get_the_post_thumbnail_url()); ?>" alt="<?php the_title(); ?>">

—

### 🟡 2. **Typography Best Practice** – Use correct HTML tags for structure
Use `h2` or `h3` consistently. “ is fine, but ensure “ doesn’t break heading hierarchy if it's part of the title section.

—

### 🟢 3. **CSS Minor Suggestion for Grid Padding Consistency**
In `.latest-arrival-row`, this:

padding:20px 40px 20px 85px;

Is asymmetric. For better mobile scaling, you might prefer:

padding: 20px 40px;

or keep it if intentional.

—

### 🔵 4. **Optional Performance Tip** – Inline “ inside `render()` is fine for Elementor, but for performance:
Move it to an external file or `enqueue_style` if you want caching and better maintenance. But **if this is meant to be a standalone Elementor widget**, it's OK as-is.

—

### 🟢 5. **Functionality** — Confirm `wc_get_rating_html()` works:
If your WooCommerce version is old or you face rating not showing, make sure ratings are enabled in WooCommerce settings and the product has reviews.

—

### ✅ Summary:
| Type | Issue/Area | Fix or Note |
|————–|—————————————-|——————————————————–|
| ✅ Main Code | Works fine | No functional errors |
| 🔐 Security | Use `esc_url()` for image | `esc_url(get_the_post_thumbnail_url())` |
| 🎨 CSS | Optional padding consistency | Adjust padding if needed |
| 🧼 Clean Code| Externalize style (optional) | For performance/scalability |

Let me know if you want to **modularize the widget** for reuse or register **custom controls in Elementor editor**.

Leave a Comment

Your email address will not be published. Required fields are marked *