Title: WordPress Developer with Flatsome Experience - Product Page Redesign & Template Setup
Category: Web Development > WordPress
Description:
I need a skilled WordPress developer to redesign a WooCommerce product page for "Samsung S20 Hybrid Shockproof Hülle" on my site, coversmart.ch, using the Flatsome theme (paid version). The design should match my website’s existing theme colors and be easy for me to apply to new products without technical skills.
Scope of Work:
You’ll create a clean, mobile-optimized product page with Flatsome’s Customizer and UX Builder, using my site’s current color scheme (found in Customizer > Style > Colors or CSS). The design should either apply globally or be saved as a reusable template, with a guide for me to add products later. Here’s what’s needed:
Customizer Setup (Global):
- Configure Header > Sticky Header: Enable "Sticky on Scroll Up," add cart icon and "Buy Now" button (use site’s primary color).
- Set WooCommerce > Product Page: Custom layout, mobile sticky "Add to Cart," gallery as "Slider + Thumbnails" with zoom.
- Adjust Style > Colors: Use my site’s existing primary and secondary colors (e.g., from Customizer or flatsome-child/style.css).
- Update Style > Typography: Montserrat, headings 32px, body 16px.
UX Builder Design:
- Edit product (ID 6525) with UX Builder (https://coversmart.ch/wp-admin/post.php?post=6525&action=edit&lang=de&app=uxbuilder&type=editor).
Layout:
- Hero Section: 2-column row (50/50):
- Left: Product Gallery (Slider, Zoom enabled).
- Right: Product Title (32px, bold), Product Rating, Product Price (site’s primary color), Text ("Ultimate Protection, Sleek Design"), Product Add to Cart (Large, site’s primary color).
- Features Section: Full-width row, 3-4 Icon Box blocks (e.g., "Shockproof," use site’s secondary color for accents).
- Details Section: Product Tabs (Line style, site’s light background color, e.g., #f5f5f5).
- Upsell Section: Related Products (3-column grid, "Lift" hover).
- Footer CTA: Banner ("Fast Shipping Across Switzerland," site’s secondary color for button).
- Style blocks: 20px padding, "Fade In" animations.
Custom CSS (Fine-Tuning):
- Add to flatsome-child/style.css or Customizer’s Style > Custom CSS, using site colors:
css
.product-gallery img { border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.product-title { font-size: 32px; font-weight: 700; color: #333; }
.single-product .button.primary { background: [site’s primary color]; padding: 15px 30px; font-size: 18px; }
.icon-box { background: [site’s light background]; padding: 20px; border-radius: 5px; }
.tabbed-content .tab-nav li a { border-bottom: 2px solid [site’s primary color]; }
Ease of Use:
- Apply design globally via Customizer (preferred) so it auto-applies to all products, or save as a reusable UX Builder template ("Default Product Layout").
- Minimize CSS dependency—use Flatsome options with site colors.
- Provide a 1-page PDF/text guide (e.g., "Add product, upload images, apply template, clear cache").
Testing:
- Test on desktop/mobile.
- Add a dummy product to verify template with site colors, then delete.
- Clear WP Rocket cache (WP Rocket > Cache leeren > Alle Sprachen).
Deliverables:
- Styled product page matching my site’s theme colors.
- Global or reusable template.
- 1-page guide for adding products.
- Tested and cache-cleared site.
Requirements:
- Expertise in WordPress, WooCommerce, and Flatsome (paid version).
- Proficient with UX Builder and CSS.
- Access provided to WordPress admin (and FTP if needed).
- Ability to match my site’s existing colors from Customizer or CSS.
Timeline: 1-2 days (7 hours estimated).
Budget: $13/hour, total $91 for 7 hours. Extra hours for revisions at same rate if needed.
Please share your Flatsome experience and a portfolio link. I’ll provide admin credentials upon hiring. Looking forward to a design that blends seamlessly with my site’s theme!
Skills Required:
- WordPress
- WooCommerce
- Flatsome Theme
- UX Builder
- CSS
- Responsive Design
Budget:
Hourly Rate: $13
Estimated Hours: 7
Total: $91
Project Type: One-Time Project
Deadline: Within 3 days of hiring (flexible if discussed). |
