Expert WooCommerce Developer Needed for Single Product Layout Widening, Draggable Cart, and Core Store Optimization

https://revivifybeautysalon.com/customer-shop/

PROJECT DESCRIPTION
We are looking for an expert WordPress / WooCommerce developer to take over and clean up a variety of layout, styling, and functionality issues across our store website. A previous freelancer applied custom code that introduced several styling bugs, hardcoded text overrides, and responsive glitches.

We need an experienced developer who can clean up the codebase, handle theme overrides correctly via a child theme or custom CSS/snippets, and optimize the frontend for both desktop zooming and mobile viewports.

SCOPE OF WORK & DETAILED REQUIREMENTS

1. MOBILE UNIFORMITY & CONTAINED ELEMENT LAYOUT SANITY CHECK

• Requirement: The entire shop main page archive grid, product categories, and single product layout pages must look completely clean, cohesive, elegant, and visually uniform on all mobile devices (iOS and Android).

• Technical Constraint: All text, pictures, buttons, and titles must be properly CONTAINED within responsive layout boxes. The developer must use safe viewport constraints (max-width: 100% and box-sizing: border-box) to ensure absolutely nothing overflows, clips, or spills off the left or right edges of any smartphone viewport. Spacing and margins must match exactly on every screen size.

2. CUSTOM WIDER CONTAINER LAYOUT FOR SINGLE PRODUCT PAGES (CSS ONLY)

• Requirement: We want our individual product detail pages to be set slightly wider to give them a spacious, elegant look.

• Technical Constraint: The developer must NOT use a built-in full-width / full-screen page template layout. This must be handled strictly using targeted custom CSS code adjustments on the container wrapper elements. The product page should be just a little bit wider, ensuring that content doesn't stretch completely edge-to-edge and that product images are NOT magnified or distorted.

3. IMPLEMENT A FLOATING, DRAGGABLE MINI-CART ICON

• Issue: The current e-commerce cart button is stuck at the top right of the page header, blocking and covering up important website layout features and menu options.

• Fix: Remove the cart button from its fixed header position. Implement a modern floating mini-cart bubble container that sits on top of the page. The developer must use jQuery UI Draggable (with touch support extensions) so that customers can seamlessly click, tap, and drag the cart anywhere on the screen out of their way. It must stay bounded within the viewport boundaries so it cannot be accidentally lost off-screen.

4. FIX GLOBAL DESKTOP ZOOM RESPONSIVENESS (SITE-WIDE)

• Issue: Currently, when zooming in or out on a desktop browser, text containers crumble, text blocks scramble, and product/page titles are swallowed or covered up by the page's main menu navigation.

• Fix: Audit the global layout wrappers. Replace restrictive hardcoded pixel elements with modern, fluid, responsive constraints so the entire page scales uniformly together. Ensure titles dynamically push down to safely clear the fixed header menu during any zoom state.

5. IMPLEMENT CUSTOM SHOP AND PRODUCT PAGE BUTTON TEXT CHANGES

• Requirement: We need the button text across our storefront modified to fit our explicit layout setup. The previous developer attempted to change this text but applied broken code that hardcoded "Shop Now" everywhere. We want this completely changed and properly coded.

• Fix: Implement the following custom text changes across the store layout paths:
• Simple Products (No Options): The main shop page grid buttons must display "Options" or "Add to Cart".
• Variable Products (With Options): The main shop page grid buttons must display "Options" to prompt the customer to check lengths/origins.
• Single Product Pages: The primary checkout action button text on the individual product pages must be changed to display "Add to Cart".

6. RESET SHOP GRID HEIGHTS & IMPLEMENT BLACK "OPTIONS" BOTTOM LABELS

• Issue: The previous freelancer forced the product grid items to be excessively long and stretched out on the main shop archive page.

• Fix: Remove the old elongation code to shorten the boxes to a uniform, balanced height. Additionally, implement a prominent, solid black container label at the absolute bottom of every single grid box on the shop page. The label container must be full width, with sharp margins, a solid black background, and white bold text reading "Options".

7. ADD A BRAND NEW BLACK CAT TAG FOR ITEMS ON SALE

• Requirement: We need a completely new visual badge added to our store layout. Currently, there is no badge or flash tag on our products when they go on sale.

• Fix: Create and implement a brand new custom badge feature. Any product that has an active sale price entered in the backend must automatically display a clean black cat icon tag positioned dynamically on top of the product image box. This needs to be added from scratch using a clean code filter hook so it automatically activates whenever an item is marked down.

8.PERMANENTLY DISPLAY & WIDEN THE PRODUCT VARIATION DESCRIPTION

• Issue: Currently, the specific description information linked to a product variation is completely hidden until a user selects an option combo. Furthermore, when it does appear, it is confined to a restrictive narrow width container block instead of matching the full width of the main layout sections.

• Fix: The developer must adjust the layout wrappers using custom CSS to stretch this description container area much wider across the page. Additionally, they must use a PHP or JavaScript override to force this variation description area to remain open and fully visible by default on page load. It must act as a primary, visible on-screen description text block for each single product page immediately without requiring customer clicks.

9. PRODUCT TYPOGRAPHY & CUSTOM FONTS

• Issue: The theme's default fonts on item text look unpolished.

• Fix: Globally apply clean typography styling exclusively to product titles/names on the shop loop grids, categories, and single product title elements. Ensure Google Fonts or custom web fonts are correctly enqueued to render beautifully on all client devices.

10. ELIMINATE MOBILE AUTO-SCROLL PAGE JUMPING BUG

• Issue: On mobile layouts, when clicking an item from the shop page grid, the single product page automatically scrolls or jumps instantly down to the bottom of the page upon loading. This issue was not always present; it started happening directly after the last freelancer added custom code snippets and files to the website.

• Fix: Search the footer scripts, functions.php snippets, or custom JavaScript arrays to locate and purge the conflicting scroll-into-view or focus script left behind by the previous developer. Enforce normal top-of-page rendering on page load across all smartphone viewports.

11. REVIEWS & TESTIMONIAL CONFIGURATION

• Fix: Set up an admin-manageable product review plugin/module allowing the site administrator to cleanly input manual verified product reviews and 5-star testimonials from the WordPress dashboard backend.

DEVELOPER REQUIREMENTS

• Extensive experience with WooCommerce theme customizing, hooks, actions, and custom filters.

• High proficiency in CSS3, media queries, mobile element containment rules, Flexbox/Grid, and responsive mobile layouts.

• High proficiency in JavaScript, jQuery UI interaction parameters, and mobile touch interface compatibility.

• Must work cleanly using a staging link/environment first or provide isolated safe code blocks to ensure live checkout and customer traffic are never disrupted.

To apply for this project, please outline your immediate availability and share a brief sentence detailing a similar WooCommerce structure layout or responsive troubleshooting task you have successfully completed. Use the secret keyword "FLUID LAYOUT" at the very beginning of your bid description so I know you have read the details thoroughly.