Woocommerce custom product with JS script, can’t understand how it works

@malcolmxtc

I’m curious, if you don’t know PHP or JS why are you trying to make these edits instead of hiring someone who understands it? Danger zone, and a major time suck for you!

All the files “you” need to edit are probably in the child theme folder.

Hi @littlepackage,

Thanks for your answer, but I’m afraid you maybe haven’t taken enough time to read everything patiently? I already found the files. What I’m missing is how are the .js and .css files called in the WP page.

I’m not a expert in PHP or JS, but I know some programming and I’m sure I can adjust the JS files to what I am trying to achieve, and more importantly, I want to learn.

Time is not an issue. I’m motivated and don’t wanna be discouraged, thank you. If you wanna help, you’ll be most welcome.

Cheers.

Here’s what is supposed to happen. I cannot guarantee that the previous developer did things this way or not. All JS and CSS files that are to be used on a page are added as link or script tags by calling (in PHP) wp_enqueue_script() or wp_enqueue_style() from within the appropriate action callback. Look for such code in functions.php of the child theme to start with. But the code can be anywhere in some other PHP file.

As you likely know, JS scripts within a file are processed on load. Of course code within functions are not executed unless the function is called. Code can also be initiated by adding event listeners, either in JS or HTML.

Hi @bcworkz,

Thanks a lot for your reply. I have managed to begin to understand what the hell the previous developer did. Every tutorial I found says what you said: wp_enqueue_script() and wp_enqueue_style().

After searching everywhere in the site files and admin menu and going over everything over and over for hours, I realized something: the standard shortcode for the add_to_cart function wasn’t being used, but [dhvc_woo_product_page_add_to_cart el_class=””] instead.

I started typing dhvc in Google and the autofill led me to the existence of this plugin https://codecanyon.net/item/woocommerce-products-layouts/7384574

Investigating the plugin folder in depth I’ve found the texts (hardcoded in wp-content/plugins/dhvc-woocommerce-page/includes/shortcode.php) that I couldn’t find editing the product or the template. For some reason windows search doesn’t index .php contents and that’s why I couldn’t find the string “Welcome to the Configuricer” in the WordPress files, whereas other strings and classes contained in .css and .js files were easy to find. Now I’ve learned something new: need to go to windows indexing options and select “index contents” for several common extensions I work with.

Now, I’m not an expert but adding HTML code in the function in the plugin files doesn’t strike me as best practices, please correct me if I’m wrong.

public function dhvc_woo_product_page_add_to_cart_shortcode($atts, $content = null) {

		extract ( $this->_shortcode_atts ( array (

				'el_class' => '' 

		), $atts ) );

		ob_start ();

		if (! empty ( $el_class ))

			echo '<div class="' . $el_class . '">';
			
				
	?>
    <link rel="stylesheet" href="https://xtraicehome.com/web/wp-content/themes/xtraice-child/bootstrap-spinner.css">
	<link rel="stylesheet" type="text/css" href="https://xtraicehome.com/web/wp-content/themes/xtraice-child/styleconfigurator.css">
    
	<script language="javascript" src="https://xtraicehome.com/web/wp-content/themes/xtraice-child/jsconfigurator.js"></script>
	<script src="https://xtraicehome.com/web/wp-content/themes/xtraice-child/jquery.spinner.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.min.js"></script>
    
	
    
    <div class="printArea"  id="printArea">
    	<h2 class="tittleConfiguraicer">Welcome to the ConfigurIcer</h2>
        <p class="textConfiguricer">Insert measurements or get one of our packs</p>
    	<div class="panelControl">
        		<div class="tittleMeasurement" onClick="ocPanel();">
                	Insert measurements
                    <span>+</span>
                </div>
                <div id="dataPanel">
                    <div>
                        <span class="tittle">LENGTH</span>
                        <div class="input-group spinner" data-trigger="spinner">
                            <div class="input-group-addon">
                                <a href="javascript:;" class="spin-down arrowLeftBlock" data-spin="down" onClick="updatePanels();"><spam class="arrowLeft"></spam></a>
                                <input type="text" name="height" id="height" value="0" data-rule="quantity" class="foots" onChange="updatePanels();" tabindex="10">
                                <a href="javascript:;" class="spin-up arrowRightBlock" data-spin="up" onClick="updatePanels();" ><spam class="arrowRight"></spam></a>
                            </div>
                        </div>
                        <span class="info">'</span> 
                        
                        <div class="input-group spinner" data-trigger="spinner">
                            <div class="input-group-addon">
                                <a href="javascript:;" class="spin-down arrowLeftBlock" data-spin="down" onClick="updatePanels();"><spam class="arrowLeft"></spam></a>
                                <input type="text" name="heightin" id="heightin" value="0" data-rule="quantity2" class="inches" onChange="updatePanels();" tabindex="11">
                                <a href="javascript:;" class="spin-up arrowRightBlock" data-spin="up" onClick="updatePanels();"><spam class="arrowRight"></spam></a>
                            </div>
                        </div>
                        <span class="info">"</span>
                    </div>
                    <div class="sepConfigurator">
                        <span class="tittle">WIDTH</span>
                        
                        <div class="input-group spinner" data-trigger="spinner">
                            <div class="input-group-addon">
                                <a href="javascript:;" class="spin-down arrowLeftBlock" data-spin="down" onClick="updatePanels();"><spam class="arrowLeft"></spam></a>
                                <input type="text" name="width" id="width" value="0" data-rule="quantity" class="foots" onChange="updatePanels();" tabindex="12">
                                <a href="javascript:;" class="spin-up arrowRightBlock" data-spin="up" onClick="updatePanels();"><spam class="arrowRight"></spam></a>
                            </div>
                        </div>
                        <span class="info">'</span>
                        
                        <div class="input-group spinner" data-trigger="spinner">
                            <div class="input-group-addon">
                                <a href="javascript:;" class="spin-down arrowLeftBlock" data-spin="down" onClick="updatePanels();"><spam class="arrowLeft"></spam></a>
                                <input type="text" name="widthin" id="widthin" value="0"  data-rule="quantity2" class="inches" onChange="updatePanels();" tabindex="13">
                                <a href="javascript:;" class="spin-up arrowRightBlock" data-spin="up" onClick="updatePanels();"><spam class="arrowRight"></spam></a>
                            </div>
                        </div>
                        <span class="info">"</span> 
                    </div>
                    <div>
                        <span class="tittle">PANELS NEEDED</span> <input type="text" name="totalPanels" id="showPanell" value="0" disabled class="totalPanels">
                    </div>
                    
                </div>
                
                
                <div id="<?php echo esc_attr($uniq_id); ?>" class="dfd-single-product-module woocommerce dfd-<?php echo esc_attr($product_style); ?> <?php echo esc_attr($el_class); ?> <?php echo esc_attr($animate); ?>" style="<?php echo $module_css;?>" <?php echo $animation_data; ?>>
		<?php
			woocommerce_template_single_add_to_cart ();
		?>
	</div>
                
                
                
        	</div>
    		<div class="panelBoton" id="panelBoton">
            	<div class="boton" id="botonIndoor" onClick="changeIndoor();">
                	<div onClick="changeIndoor();">INDOOR</div>
                    <div onClick="changeIndoor();">OUTDOOR</div>
                </div>
            </div>
    
    
        <div id="wrapper" class="wrapper">
        	<div class="gridbacktexture transition" id="gridbacktexture"></div>
          	  <div class="gridPosition transition" id="gridPosition">
                <div class="gridback transition" id="gridback">
					<div id="reglaW" class="reglaW">
						<div id="rwPanel" class="no-span"><span id="rwPanelText" >xxx"</span></div>
					</div>
					<div id="reglaH" class="reglaH ">
						<div id="rhPanel" class="no-span"><div id="rhPanelText" >xxx"</div></div>
					</div>
                      <div id="grid" class="grid transition" >
                        
                      </div>
              </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>?
    
    
    </div>
    
    
	
    
	<?php if(!empty($css_js)) : ?>
	<script type="text/javascript">
		(function($) {
			"use strict";
			$('head').append('<?php echo $css_js; ?>');
		})(jQuery);
	</script>
	<?php endif; ?>
<?php
	
			

		

		if (! empty ( $el_class ))

			echo '</div>';

		return ob_get_clean ();

	}

So now I can edit the code. The thing is I want to keep both products at the same time in the store. The old version will be kept available for US visitors(until the stock is sold out) and the new panels calculator will be showed only to Canadian visitors.

I’m guessing I need a condition with geolocation there so that different .js and .css files are loaded in the product view. Will start investigating this.

Any advice is greatly welcome!