WooCommerce - product option selector - transparent background

Support
#1

The background of the option selector pulldown in all my WooCommerce product detail pages is solid white, and not showing the page background.

Is there CSS code that can make this transparent, to better match the rest of the page design?

#2

Hi Dave,

Thank you for writing in, please add this to Theme Options > CSS

.woocommerce table,
.woocommerce select,
.woocommerce input[type="number"] {
	background-color: transparent;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Cheers!

#3

Perfect, thanks!

One other styling question…is it possible to move the ‘footer content’ BELOW the Social and Navigation?

#4

Hello @dbrinda,

Yes you can move the ‘footer content’ BELOW the Social and Navigation. To do that, since you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/ICON/WP-FOOTER.PHP
// -----------------------------------------------------------------------------
// Footer output for Icon.
// =============================================================================

?>

  <?php x_get_view( 'global', '_footer', 'widget-areas' ); ?>

  <?php if ( x_get_option( 'x_footer_bottom_display' ) == '1' ) : ?>

    <footer class="x-colophon bottom" role="contentinfo">
      <div class="x-container max width">

        

        <?php if ( x_get_option( 'x_footer_social_display' ) == '1' ) : ?>
          <?php x_social_global(); ?>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_menu_display' ) == '1' ) : ?>
          <?php x_get_view( 'global', '_nav', 'footer' ); ?>
        <?php endif; ?>


        <?php if ( x_get_option( 'x_footer_content_display' ) == '1' ) : ?>
          <div class="x-colophon-content">
            <?php echo do_shortcode( x_get_option( 'x_footer_content' ) ); ?>
          </div>
        <?php endif; ?>

      </div>
    </footer>

  <?php endif; ?>

<?php x_get_view( 'global', '_footer' ); ?>

3] Save the file named as wp-footer.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/legacy/cranium/footers/views/icon/

You will have to create the folder path since it does not exist yet in the child theme.

#5

Awesome, it moved, but I can some errant code in the body of the page:

Just remove the commented code from the top? Also can I add something like a <br> to add some more space between nav and footer content?

#6

Nevermind…my bad…I just noticed I missed the opening <?php at the top of the code. All good (unless you have a tip for adding a <br to add space.

One last styling issue…I noticed the CSS for the WooCommerce transparent background didn’t pickup the ‘Cart’ page. Is it possible to have that change too? Or even better, change the site background color to white just for the Cart page…is it possible to target an individual page background color?

#7

Hello @dbrinda,

Please have the css code updated and use this:

.woocommerce table,
.woocommerce select,
.woocommerce input[type="number"] {
	background-color: transparent;
}

table th, table td {
    background-color: transparent;
}

We would loved to know if this has work for you. Thank you.

#9

Perfect! That last block of CSS fixed all the pages in the entire checkout flow.

Thanks for the great support…you guys rocks! Have a good evening! #xThemeFTW

#10

You’re welcome!
We’re glad we were able to help you out.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.