Images product with sticky header

In WordPress, you can implement the sticky column for your product images using CSS, similar to what I outlined earlier. Here’s how you can do it directly within WordPress: Steps to Add Sticky Column in WordPress:

1. Identify the Classes/IDs of Your Left and Right Columns:
   • You’ll need to find the class or ID that WordPress or your theme assigns to the left column (with images) and the right column (with text). You can do this using the browser’s Inspect Tool (right-click on the page and select “Inspect”).
2. Add Custom CSS to Your WordPress Site: You can add custom CSS in a few different places in WordPress:
   • Option 1: Through the Customizer:
     1. Go to your WordPress Dashboard.
     2. Navigate to Appearance > Customize.
     3. In the Customizer, go to Additional CSS.
     4. Paste the following CSS (adjust the selectors to fit your columns):
     .left-column { position: sticky; top: 0; /* Make it stick to the top */ z-index: 10; /* Ensure it stays above the text */ }
     5. Click Publish to apply the changes.
   • Option 2: Through the Theme’s style.css (if you’re using a child theme or editing your theme files directly):
     1. Go to Appearance > Theme Editor.
     2. Open the style.css file.
     3. Add the same CSS code mentioned above.
     4. Click Update File.
3. Check Your Layout:
   • After adding the CSS, check the page where you want the sticky left column to make sure the images are sticking as the user scrolls down. If the sticky effect doesn’t work, verify the class names or IDs of the left column and adjust the CSS selectors accordingly.

Example HTML Structure:

If you’re working with a custom layout, the HTML might look something like this:

<div class="left-column">
    <!-- Product images go here -->
</div>
<div class="right-column">
    <!-- Product text goes here -->
</div>

Additional Tips:

• If your theme uses custom classes or has a grid system like Bootstrap, ensure you’re targeting the correct column class for the left and right sections.
• Test the layout in different screen sizes, as sticky elements can sometimes have issues on mobile devices.

Let me know if you run into any issues!

Hi @lauramark,

I’m not quite sure what you mean by the column you’re referring to, but your request seems to be beyond the scope of this forum, which is focused on addressing core WooCommerce issues and bugs.

For your customization needs, I’d recommend hiring someone from Codeable.io to assist you further.